Question

我几乎就在那里。我正在创建拖放功能，而我遇到问题的最后一部分是找到一种清除方法来删除已删除的项目。

黄色div是可拖动的。红色div是可以放弃的。当黄色div被拖动到红色div的顶部时，红色div变为蓝色。

当黄色div掉落时，蓝色变为绿色表示它已被掉落。

在此步骤之后，我希望简单地删除黄色div或style.display =＆＃39; none＆＃39;。

除了删除黄色div之外，这是一个包含所有内容的片段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

另一个问题：我在事件列表中传递参数（this.id），以便稍后我可以找到更改颜色的元素。有没有办法简单地传递整个对象本身？我试过这个＆＃39;而不是this.id，它没有工作。谢谢。

Answer 1

你只是改变了droppable的背景，而不是实际移动了draggable。如果要移动它，请将以下行添加到删除的函数中：

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

如果您只想更改可拖动的显示，请尝试以下操作：

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>

Answer 2

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

HTML 5 Drag＆amp;删除功能 - 删除丢弃的项目

2 个答案: