HTML 5 Drag & Drop Functionality - Remove Dropped Item

Question

I'm almost there. I'm creating drag and drop functionality and the last part i'm having issues with is finding a clean way to remove the item that has been dropped.

The yellow div is draggable. The red div is droppable. When the yellow div is dragged on top of the red div, the red div turns blue.

When the yellow div is dropped, blue turns green to show that it has been dropped.

After this step, I want the yellow div to simply be deleted or style.display = 'none'.

Here is a snippet with everything working except removing the yellow 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>

An additional question: I'm passing the parameter (this.id) on the event listeners so that I can find the element later to change the color. Is there a way to simply pass the entire object itself? I tried this instead of this.id and it didn't work.

Answer 1

You're just changing the background of the droppable, not actually moving the draggable. If you want to move it then add the following lines to dropped function:

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

if you just want to change the display of draggable, then try this:

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

Edit:
Regarding the id, you don't need to pass it to the function. You can get it from event like ev.target.id, or just directly use the target. Edited the code below as well.

===

The modified code:

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>