javascript - drag and drop while keeping copy of dragged element -

i want drag , drop input elements 1 div div while keeping copy of dragged element in parent div.i achieve this.but after dropping droppable div still performing drag , drop function.and allowing make multiple copy also.but don’t want this.. how can avoid in droppable div.

           function allowdrop(ev)                     {                         ev.preventdefault();                     }  //alert("droped");  //alert("droped");                      function drag(ev)                      {                       //alert("dragging");                         ev.datatransfer.setdata("text",ev.target.id);                     }                      function drop(ev)                     {                                      var data=ev.datatransfer.getdata("text");         ev.target.appendchild(document.getelementbyid(data).clonenode(true));                         ev.preventdefault();     }  html page:      <div id="drag1"  draggable="true" ondragstart="drag(event)" > <div id="drag1"  draggable="true" ondragstart="drag(event)" >              <div class="drag"  onclick='return false;'readonly>             <label>                 textbox</label><input  type="text" name="text" value="">             </div>         </div><br>          <div id="drag2" class="drag" draggable="true" ondragstart="drag(event)" >             <div onclick='return false;'>                 <input type="radio" name="" value=""><label>check button</label><br>             </div> <br>         </div>          <div id="drag3" class="drag" draggable="true" ondragstart="drag(event)" >             <div>                 <input type="checkbox" name="" value=""><label>check box</label><br>             </div>          </div><br>