드래그 앤 드롭하는 방법은 사라지지 않고 계속 드래그 앤 드롭 할 수 있습니다.

Question

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)); 
} 


<div class = “container”> 
    <div class = “row” > 
    <div class="col-md-1 center"> 
     <img src="https://i.stack.imgur.com/vxnww.jpg" style="height: 250px"> 
    </div> 
    <div class="col-md-1"> 
     <div class="boxFirstCol" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> 
     <p><b>4s</b></p> 
     <div class="box"> </div> 
     <p><b>3s</b></p> 
     <div class="box"> </div> 
     <p><b>2s</b></p> 
     <div class="box"> </div> 
     <p><b>1s</b></p> 
    </div> 
    </div> 
</div> 

이 방법으로 보이게하는 코드가 더 있지만 상자 안에 전자를 끌어다 놓을 수는 있습니다. 그 상자의 전자들은 사라질 것입니다.

Answer 1

사용이 : -

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 clonedElement = document.getElementById(data).cloneNode(true); 
    clonedElement.id = "element_1"; // Set unique id for each element I have used static one. 
    ev.target.appendChild(clonedElement); 
} 

당신은 요소를 복제 (참) cloneNode를 사용해야합니다.