javascript - 拖动的元素在下降时消失

Question

我有一个可拖动的图片和 2 个 div 作为放置目标。您应该在这 2 个 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>