【发布时间】：2015-09-24 07:21:01
【问题描述】：
您好，我正在尝试为此拖放界面实现 reset() 函数。最初，条形图以随机顺序（硬编码位置）排列，用户无法通过拖放来移动它们。我想要一个重置函数来将带有表格的 div 元素刷新到其初始位置。
我试图复制 innerhtml 代码并在单击重置按钮时再次设置它，但这种方法似乎不起作用。有没有其他方法可以做到这一点？
<script>
var container = document.getElementById("game1");
var content = container.innerHTML;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var evtarget=ev.target;
if (evtarget=="[object HTMLImageElement]"){
evtarget = evtarget.parentNode;
}
else {
ev.target.appendChild(document.getElementById(data));
}
}
function reset1(){
var container = document.getElementById("game1");
var content = container.innerHTML;
alert(content);
container.innerHTML= content;`
}
<div id="game1" style="padding-top: 140px; padding-left:40px">
<div class="container1">
<div>
<table>
<tr><td>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag8" src="img/8.png" draggable="true" ondragstart="drag(event)" ondrop=""></div>
</td>
<td>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag4" src="img/4.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag3" src="img/3.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag5" src="img/5.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="img/1.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag7" src="img/7.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag6" src="img/6.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag9" src="img/9.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag2" src="img/2.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag10" src="img/10.png" draggable="true" ondragstart="drag(event)" ></div>
</td>
<td>
<div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</td>
</tr>
</table>
<table>
<tr>
<td style="padding-left:230px; padding-top:15px; width:100px;">
<input type="button" value="Reset" id="reset" onclick="reset1();" style="width:150px; background-color:black; color:white;">
</td></tr>
</table>
<br>
</div>
</div>
【问题讨论】：
-
您使用哪个插件进行拖放？
-
我猜没有使用插件。我使用了w3schools.com/html/html5_draganddrop.asp 中给出的基本语法，但是，jQuery 用于检查每个图像是否被拖到正确的位置。
标签： javascript jquery html drag-and-drop reset