HTML 5 拖放功能 - 删除掉落的项目

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

https://jsfiddle.net/mcsab3aa/5/

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/html', ev.target.id);
}

function dropped(ev, id) {
    var id = ev.dataTransfer.getData("text/html");
    var elem = document.getElementById(id);
    elem.parentElement.removeChild(elem);
}

您只需要添加 text/html 与文本

Answer 2

您只是在更改可放置对象的背景，而不是实际移动可拖动对象。如果要移动它，请将以下行添加到 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>

HTML 5 拖放功能 - 删除掉落的项目

HTML 5 Drag & Drop Functionality - Remove Dropped Item

html

javascript

javascript-events