我快到了。我正在创建拖放功能,我遇到的最后一部分是找到一种干净的方法来删除已拖放的项目。
黄色的 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
但它没有用。
最佳答案
您只是在更改可放置对象的背景,而不是实际移动可拖动对象。如果要移动它,请将以下行添加到 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>
关于javascript - HTML5 拖放功能 - 删除掉落的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29958236/