拖曳的物品掉落消失

Question

我有一個可拖動的圖片和2個div作為放置目標。 您應該在這兩個div之間來回拖動項目。 我在div內也有一個文本，當項目放到它上面時我想消失（可能從其拖動時再次出現）。

我正在使用它，它使文本消失，但問題是照片也消失了，無法再次拖動。

有人可以看到問題所在嗎？ 謝謝

 function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); if (ev.target.id == 0) { document.getElementById('0').textContent = ''; } else if (ev.target.id == 1){ document.getElementById('1').textContent = ''; } } 

 <div class="inbl photo"><img src="pic.jpg" ondragstart="drag(event)" id="drag1"></img></div> <div id="0" class="dragdiv1" ondrop="drop(event)" ondragover="allowDrop(event)">Drag&Drop Area</div> <div id="1" class="dragdiv2" ondrop="drop(event)" ondragover="allowDrop(event)">Drag&Drop Area</div> 

Answer 1

發生這種情況的原因是，當您設置textContent屬性時，所有子節點都將被刪除，並被包含指定字符串的單個Text節點替換。 因此，您將使用新的文本/空字符串替換掉的img。

清除文本后附加圖像。

 .dropdiv { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 20px; } img { border: 1px solid #000; } 

 <div id="drop0" class="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)">Drag&Drop Area 1</div> <div id="drop1" class="dropdiv" ondrop="drop(event)" ondragover="allowDrop(event)">Drag&Drop Area 2</div> <img src="https://dummyimage.com/100" ondragstart="drag(event)" draggable="true" id="drag1" /> <script> function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); if (ev.target.id == 'drop0') { document.getElementById('drop0').innerText = ""; } else if (ev.target.id == 'drop1'){ document.getElementById('drop1').innerText = ""; } document.getElementById(data).style.border='none'; ev.target.appendChild(document.getElementById(data)); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function allowDrop(ev) { ev.preventDefault(); } </script> 

Answer 2

您的代碼刪除后刪除了這些項目。

在if語句之后調用appendchild方法。

 function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); if (ev.target.id == 0) { document.getElementById('0').textContent = ''; document.getElementById('1').textContent = 'some text' } else if (ev.target.id == 1){ document.getElementById('0').textContent = 'some other text'; document.getElementById('1').textContent = ''; } ev.target.appendChild(document.getElementById(data)); }