Javascript Drag and Drop: rimozione dell'elemento trascinato dopo il rilascio riuscito

Question

Sto utilizzando il codice nativo trascinare e rilasciare l'API in javascript. Come posso rimuovere un elemento trascinato dal DOM dopo una caduta riuscita?

• ho provato ascoltando il goccia evento, ma questo solo viene licenziato sull'elemento che viene lasciato cadere su e non ha alcun riferimento all'elemento trascinato.
• Ho provato ad ascoltare l'elemento dragger , ma questo non mi consente di sapere se una goccia è andata a buon fine o meno.
• Sto tentando di evitare la memorizzazione dell'elemento trascinato in una variabile globale in quanto ciò causerebbe problemi se si verifica un trascinamento tra diverse schede o browser.

Ecco un esempio: http://jsfiddle.net/KNG6n/3/

un elenco di lettere che possono essere trascinati nella scatola. Quando il nodo di una lettera è lasciato cadere sulla scatola, vorrei che fosse rimosso dalla lista (senza influenzare nessun altro elenco contenente la stessa lettera)

Answer 1

intercettate l'evento dragend e controllare la variabile dropEffect dell'oggetto dataTransfer prima di fare qualsiasi cosa con l'elemento trascinato:

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

Answer 2

Un modo sarebbe assegnarlo a una variabile con scope esterna a il dragstart e usa quell'elemento quando viene rilasciato.

See this fiddle.

Answer 3

prendere anche uno sguardo a questo esempio: http://html5demos.com/drag

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

el.parentNode.removeChild(el);