Перетаскивание Javascript: удаление перетаскиваемого элемента после успешного удаления

Я использую собственный API перетаскивания в javascript. Как удалить перетаскиваемый элемент из DOM после успешного удаления?

Я пробовал прослушивать событие drop, но это срабатывает только на элемент, который удаляется и не имеет ссылки на перемещаемый элемент.
Я пробовал прослушивать элемент dragend, но это не дает мне знать, было ли успешным падение или нет.
Я пытаюсь избежать хранения элемента, перетаскиваемого в глобальную переменную, поскольку это вызовет проблемы, если между различными вкладками или браузерами возникает перетаскивание.

Вот пример: http://jsfiddle.net/KNG6n/3/

Список букв, которые можно перетащить в поле. Когда в поле будет сброшено письмо node, я бы хотел, чтобы он был удален из списка (без каких-либо других элементов списка, содержащих одну и ту же букву).

Ответ 1

Слушайте событие dragend и проверяйте переменную dropEffect объекта dataTransfer перед тем, как делать что-либо с перетаскиваемым элементом:

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

Ответ 2

Также посмотрите на этот пример: http://html5demos.com/drag

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

Ответ 3

Одним из способов было бы присвоить это переменной, ограниченной вне dragstart, и использовать этот элемент при удалении.

Посмотрите эту скрипту.