2011-11-25 40 views
14

Estoy usando el nativo arrastrando y soltando la API en javascript. ¿Cómo puedo eliminar un elemento arrastrado del DOM después de una caída exitosa?Javascript Arrastrar y soltar: eliminar el elemento arrastrado después de la operación de eliminación exitosa

  • He intentado escuchar el casocaída, pero esto sólo es despedido en el elemento que se deja caer sobre y no tiene ninguna referencia al elemento que se arrastra.
  • He intentado escuchar dragend elemento, pero esto no me deja 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 provocará problemas si se produce un arrastre entre diferentes pestañas o navegadores.

He aquí un ejemplo: http://jsfiddle.net/KNG6n/3/

una lista de cartas que se pueden arrastrar en la caja. Cuando se suelta un 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)

Respuesta

11

detectar el evento dragend y comprobar la variable dropEffect del objeto dataTransfer antes de hacer nada con el elemento arrastrado:

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

Al parecer, dropEffect siempre será ninguno en Chrome en Windows, el informe de errores ha estado abierto durante años: https://code.google.com/p/chromium/issues/detail?id=39399 – marcelj

0

Una forma sería asignar esto a una variable delimitada fuera de el dragstart, y usa ese elemento cuando se suelta.

See this fiddle.

+0

que estoy tratando de evitar almacenar el elemento de ser arrastrado en una variable global ya que esto causará problemas si se produce un arrastre entre diferentes pestañas o navegadores. – lucas

4

también echar un vistazo a este ejemplo: http://html5demos.com/drag

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

el.parentNode.removeChild(el); 
+0

Esta solución solo funciona si todos los elementos tienen identificadores (que los míos no). Además, significa que debe establecer los datos para que sean la identificación, en lugar de algo útil. – lucas

Cuestiones relacionadas