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

Question

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

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

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

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

Answer 1

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

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

Answer 2

Также взгляните на этот пример: http://html5demos.com/drag

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

el.parentNode.removeChild(el);

Answer 3

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

См. Эту скрипку.