title: How to add a reset() function to a drag and drop HTML?
body: <p>Hi I'm trying to implement a reset() function to this drag and drop interface. Initially the bars are arranged in a random order (hardcoded positions) and the user cant move them around by drag/drop. I want a reset function to refresh the div element with the table to its initial positions.</p>
  
  <p>I have tried to copy the innerhtml code and set it again on the reset button click but this method doesn't seem to work. Is there any other way in which this is possible?</p>
  
  <pre><code>&lt;script&gt;
  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;`
  }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="game1" style="padding-top: 140px; padding-left:40px"&gt;
  &lt;div class="container1"&gt;
      &lt;div&gt;
      &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;
          &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag8" src="img/8.png" draggable="true" ondragstart="drag(event)" ondrop=""&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag4" src="img/4.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag3" src="img/3.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag5" src="img/5.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag1" src="img/1.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag7" src="img/7.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag6" src="img/6.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag9" src="img/9.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag2" src="img/2.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;img id="drag10" src="img/10.png" draggable="true" ondragstart="drag(event)" &gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
          &lt;div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
  
      &lt;/table&gt;
      &lt;table&gt;
          &lt;tr&gt;
          &lt;td style="padding-left:230px; padding-top:15px; width:100px;"&gt;
             &lt;input type="button" value="Reset" id="reset" onclick="reset1();" style="width:150px; background-color:black; color:white;"&gt; 
          &lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
          &lt;br&gt;        
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>