Javascript Glisser-Déposer: enlever l'élément glissé après une chute réussie

Je suis en utilisant le natif faire glisser et déposer des API en javascript. Comment puis-je supprimer un élément traîné à partir du DOM à la suite d'une baisse des succès?

  • J'ai essayé d'écouter le baisse événement, mais ce n'obtient tiré sur l'élément qui est déposé sur la surface et n'a pas de référence à l'élément déplacé.
  • J'ai essayé d'écouter le dragend élément, mais cela ne me permet pas de savoir si une baisse a été couronnée de succès ou non.
  • J'essaie d'éviter le stockage de l'élément glissé dans une variable globale, car cela pourrait causer des problèmes si un glisser se produit entre les différents onglets des navigateurs.

Voici un exemple: http://jsfiddle.net/KNG6n/3/

Une liste de lettres qui peuvent être glissés dans la boîte. Quand une lettre du nœud est tombé sur la boîte, j'aimerais qu'il soit retiré de la liste (sans opérer autres éléments de la liste contenant la même lettre)

source d'informationauteur lucas

  1. 11

    Écouter la dragend de l'événement et de vérifier la dropEffect variable de l'objet dataTransfer avant de faire quoi que ce soit avec l'élément traîné:

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

    Aussi jeter un oeil à cet exemple: http://html5demos.com/drag

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

    el.parentNode.removeChild(el);
  3. 0

    Un autre moyen serait d'assigner à une variable étendue à l'extérieur de la dragstart, et l'utilisation de cet élément en cas de chute.

    Voir ce violon.