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 )，以便以后可以找到元素來更改顏色。 有沒有辦法簡單地傳遞整個 object 本身？ 我嘗試this而不是this.id ，但它沒有用。

Answer 1

您只是在更改可放置對象的背景，而不是實際移動可拖動對象。 如果要移動它，則將以下行添加到已刪除的 function 中：

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，不需要傳遞給function。 您可以從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