Question

我有一张可拖动的图片和2个div作为放置目标。你应该在这两个div之间来回拖动项目。我还在div中有一个文本，当项目放在它上面时我想要消失（并且可能在拖动时再次出现。）

我使用此功能会使文字消失，但事实是照片也会消失，无法再次拖动。

有人能看出问题所在吗？感谢

＆＃13;

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 = '';
    }
}

＆＃13;

<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>

＆＃13;

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方法。

＆＃13;

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

＆＃13;

拖动的项目在下降时消失

2 个答案: