title: drag drop only one button inside div
body: <p>hello I am creating a web app in which I want to drag and drop a button inside a div,</p>
  
  <p>I found something in w3schools and after a work-around did something like the following</p>
  
  <p><a href="https://i.stack.imgur.com/Rgqb1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rgqb1.png" alt="Image"></a></p>
  
  <p>but I want if I drag and drop second button in div,</p>
  
  <p>the first should change its position and go back to origional position,</p>
  
  <p>I created a fiddler which is not working</p>
  
  <p><a href="https://jsfiddle.net/gu5sj6pm/" rel="nofollow noreferrer">not working fiddler</a></p>
  
  <p>following is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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");
      ev.target.appendChild(document.getElementById(data));
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1 {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Drag the W3Schools image into the rectangle:&lt;/p&gt;
  &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;&lt;/div&gt;
  &lt;br&gt;
  &lt;button id="test" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;button 1&lt;/button&gt;
  &lt;button id="test2" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;button 2&lt;/button&gt;
  &lt;button id="test3" draggable="true" ondragstart="drag(event)" width="336" height="69"&gt;button 3&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>