如何将 reset() 函数添加到拖放 HTML？

Question

您好，我正在尝试为此拖放界面实现一个 reset() 函数。最初，条形以随机顺序排列（硬编码位置），用户不能将它们移动 drag/drop。我想要一个重置函数来将带有 table 的 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>

Answer 1

将加载时的 HTML 保存到全局变量，并在单击 reset 按钮时使用它。

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");
    container.innerHTML= html;
}                
var html;
window.onload = function(){
 html = document.getElementById('game1').innerHTML;
};

.container1 table div{
    width:60px;
    height:40px;
    border:1px solid red;
}

<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="http://dummyimage.com/60x40/f00/fff" draggable="true" ondragstart="drag(event)" ondrop=""></div></td>
        <td><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag4" src="http://dummyimage.com/60x40/00f/fff" draggable="true" ondragstart="drag(event)" ></div></td>
        <td><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
        <td><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
        <td><div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
        <td><div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag7" src="http://dummyimage.com/60x40/0ff/fff" draggable="true" ondragstart="drag(event)" ></div></td>
        <td><div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag6" src="http://dummyimage.com/60x40/a0f/fff" draggable="true" ondragstart="drag(event)" ></div></td>
        <td><div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag9" src="http://dummyimage.com/60x40/fb2/fff" draggable="true" ondragstart="drag(event)" ></div></td>
        <td><div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag2" src="http://dummyimage.com/60x40/bd6/fff" draggable="true" ondragstart="drag(event)" ></div></td>
        <td><div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag10" src="http://dummyimage.com/60x40/12d/fff" draggable="true" ondragstart="drag(event)" ></div>
        <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>

如何将 reset() 函数添加到拖放 HTML？

How to add a reset() function to a drag and drop HTML?

javascript

jquery

html

drag-and-drop

reset