Javascript Drag and Drop: removing dragged element following successful drop

Question

I'm using the native drag and drop API in javascript. How can I remove a dragged element from the DOM following a successful drop?

• I've tried listening to the drop event, but this only gets fired on the element which is dropped onto and has no reference to the element being dragged.
• I've tried listening to the dragend element, but this doesn't let me know whether a drop was successful or not.
• I'm trying to avoid storing the element being dragged in a global variable as this will cause problems if a drag occurs between different tabs or browsers.

Here's an example: http://jsfiddle.net/KNG6n/3/

A list of letters which can be dragged into the box. When a letter's node is dropped on the box, I'd like it to be removed from the list (without effecting any other list items containing the same letter)

Answer 1

You get the drop position of element in the dragend event. You can find if an droppable element is present at that position.

You can use document.elementFromPoint(x, y);

Answer 2

Also take a look at this example: http://html5demos.com/drag

var el = document.getElementById(e.dataTransfer.getData('Text'));

el.parentNode.removeChild(el);

Answer 3

Listen for the dragend event and check the dropEffect variable of the dataTransfer object before doing anything with the dragged element:

htmlElement.addEventListener('dragend', function(event){
    if(event.dataTransfer.dropEffect !== 'none'){
        $(this).remove();
    }
});

Answer 4

One way would be to assign this to a variable scoped outside of the dragstart, and use that element when dropped.

See this fiddle.