objetos - Arrastrar y soltar Javascript: eliminar el elemento arrastrado después de una caída exitosa

hacer drag and drop javascript

Question

Estoy usando la API nativa de arrastrar y soltar en javascript. ¿Cómo puedo eliminar un elemento arrastrado del DOM después de una caída exitosa?

• He intentado escuchar el evento de caída , pero esto solo se activa en el elemento que se suelta y no tiene ninguna referencia al elemento que se está arrastrando.
• Intenté escuchar el elemento dragend , pero esto no me permite saber si una caída fue exitosa o no.
• Estoy tratando de evitar almacenar el elemento que se está arrastrando en una variable global, ya que esto causará problemas si se produce un arrastre entre diferentes pestañas o navegadores.

Aquí hay un ejemplo: http://jsfiddle.net/KNG6n/3/

Una lista de letras que se pueden arrastrar al cuadro. Cuando se suelta el nodo de una carta en el cuadro, me gustaría que se elimine de la lista (sin afectar a ningún otro elemento de la lista que contenga la misma letra)

Answer 1

Una forma sería asignar esto a una variable con alcance fuera del dragstart, y usar ese elemento cuando se descarte.

Mira este violín.

Answer 2

Escuche el evento dragend y verifique la variable dropEffect del objeto dataTransfer antes de hacer algo con el elemento arrastrado:

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

Answer 3

También eche un vistazo a este ejemplo: http://html5demos.com/drag

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

el.parentNode.removeChild(el);