Question

我有2个div（dragdiv1，dragdiv2），每个div包含另一个带文本的div。我在前面提到的前两个div之间来回拖动来自另一个div的照片，当我将照片放入其中一个时，我希望文本消失，然后当照片被拖入另一个div时再次出现。 / p>

我这个非常新，所以我有点努力实现它。有人可以给我一个如何制作它的提示吗？

这是我到目前为止所做的，但没有消失，所以它可能完全错了，或者我至少有点接近我的意图？

HTML部分：

<div class="photo">
   <img src="blahblah.jpg" draggable="true" ondragstart="drag(event)" id="drag1"></img>
</div>

<div id="0" class="dragdiv1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div class="draganddroptext">Drag&Drop Area</div>
</div>

<div id="1" class="dragdiv2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div class="draganddroptext">Drag&Drop Area</div>
</div>

Javascript尝试：

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));
    var off = document.getElementsByClassName('draganddroptext');
    if (off.style.display == "none") {
        off.style.display = "inline";
    } else {
        off.style.display = "none";
    } 
}

---更新

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    var targetId = ev.target.id;
    var targetElems = document.getElementsByClassName('draganddroptext');
    var off;
    var on;
    if (targetId == 0) {
        off = targetElems[0];
        off.style.display = "none";
        on = targetElems[1];
        if (on.style.display == "none") ){
            on.style.display = "inline";
        }
    } else {
        off = targetElems[1];
        off.style.display = "none";
        on = targetElems[0];
        if (on.style.display == "none") ){
            on.style.display = "inline";
        }       
    }           
}

非常感谢任何帮助！

Answer 1

getElementsByClassName返回一个元素数组。因此，要控制元素的可见性，您必须包含要隐藏的元素，例如：

var off = document.getElementsByClassName('draganddroptext');
off[0].style.display = "none"; //hides first element

您已经拥有目标元素，因此您可以通过调用以下方式获取相关元素：

var off = ev.target.getElementsByClassName('draganddroptext')[0];
if (off.style.display == "none") {
    off.style.display = "inline";
} else {
    off.style.display = "none";
}

如何让一个子元素在删除后消失？

1 个答案: