拖曳的物品掉落消失

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