javascript - HTML5 拖放功能 - 删除掉落的项目

Question

我快到了。我正在创建拖放功能，我遇到的最后一部分是找到一种干净的方法来删除已拖放的项目。

黄色的 div 是可拖动的。红色的 div 是可放置的。当黄色的 div 被拖到红色的 div 上面时，红色的 div 变成蓝色。

当黄色的 div 被放下时，蓝色变成绿色表明它已经被放下。

在这一步之后，我想简单地删除黄色的 div 或 style.display = 'none'。

这是一个片段，除了删除黄色 div 之外，一切正常:

    function dragOver(ev, id) {
        ev.preventDefault();
        document.getElementById(id).style.background = 'blue';
    }

    function stopDrop(ev, id){
        ev.preventDefault();
        document.getElementById(id).style.background = 'red';       
    }

    function dragStart(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function dropped(ev, id) {
        ev.preventDefault();
        document.getElementById(id).style.background = 'green';         
    }

div{padding:10px; margin:10px;}
div:nth-child(even){background:yellow;}
div:nth-child(odd){background:red;}

<div id="drop" ondrop="dropped(event, this.id)" ondragover="dragOver(event, this.id)" ondragleave="stopDrop(event, this.id);" ondragend="disableDrop(event);">drop here</div>
<div id="drag" draggable="true" ondragstart="dragStart(event)">drag this</div>

另一个问题:我将参数 (this.id) 传递给事件监听器，以便稍后可以找到该元素以更改颜色。有没有办法简单地传递整个对象本身？我尝试了 this 而不是 this.id 但它没有用。

Answer 1

您只是在更改可放置对象的背景，而不是实际移动可拖动对象。如果要移动它，请将以下行添加到 dropped 函数中:

var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));

如果你只是想改变draggable的显示，那么试试这个:

var data = ev.dataTransfer.getData("Text");
document.getElementById(data).style.display = 'none';

编辑:
关于id，你不需要将它传递给函数。您可以从 ev.target.id 等事件中获取它，或者直接使用 target。还编辑了下面的代码。

===

修改后的代码:

function dragOver(ev) {
    ev.preventDefault();
    ev.target.style.background = 'blue';
}

function stopDrop(ev){
    ev.preventDefault();
    ev.target.style.background = 'red';		
}

function dragStart(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function dropped(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    //ev.target.appendChild(document.getElementById(data));
    document.getElementById(data).style.display = 'none';
    ev.target.style.background = 'green';			
}

div{padding:10px; margin:10px;}
div:nth-child(even){background:yellow;}
div:nth-child(odd){background:red;}

<div id="drop" ondrop="dropped(event, this.id)" ondragover="dragOver(event, this.id)" ondragleave="stopDrop(event, this.id);" ondragend="disableDrop(event);">drop here</div>
<div id="drag" draggable="true" ondragstart="dragStart(event)">drag this</div>