Rendre une jquery jQuery accepte les éléments d'un fichier triable qui utilise connectWith

Question

J'ai une liste triable qui utilise connectWith pour m'assurer qu'elle ne peut être triée que dans ses propres types de liste.

Maintenant j'essaye de faire un élément de poubelle de dépôt qui apparaît en bas sur la fenêtre quand un article est trié. Cet élément est en dehors du contexte des listes et supprime simplement tout élément qui y est déposé. La fonctionnalité souhaitée est identique à la suppression d'un raccourci à partir du bureau d'un téléphone Android, si vous êtes familier avec cela. Le problème est que, bien que ma poubelle soit une droppable qui accepte '*', mon sortable est seulement indiqué à connectWith d'autres éléments '.dropZone', ce qui signifie que je ne peux pas obtenir l'un de mes éléments triables pour provoquer un survol. état sur l'élément poubelle.

J'ai essayé de faire de chaque triable un objet déplaçable sur l'événement start, mais bien sûr, je ne fais pas glisser ce draggable au moment exact et donc il n'est pas activé. Est-il possible de satisfaire les deux exigences ou vais-je devoir détecter la poubelle peut planer manuellement?

Answer 1

Que diriez-vous de faire de la poubelle aussi un .dropZone? Ensuite, vous obtiendrez un événement drop approprié, et vous pouvez gérer la suppression correctement.

Il peut y avoir des effets secondaires de rendre la poubelle triable, mais je suppose qu'ils devraient être faciles à contourner. Si cela ne répond pas à vos exigences, pourriez-vous lancer une démonstration somewhere, afin que nous sachions exactement ce que nous aurions à faire pour garder votre structure intacte, tout en ajoutant les fonctionnalités dont vous avez besoin?

Answer 2

Depuis connectWith accepte un sélecteur, vous pouvez lui fournir un sélecteur qui sélectionne les deux listes connectées et votre poubelle.

$("#sortable1, #sortable2").sortable({ 
    connectWith: '.connectedSortable, #trash' 
}).disableSelection(); 

$("#trash").droppable({ 
    accept: ".connectedSortable li", 
    hoverClass: "ui-state-hover", 
    drop: function(ev, ui) { 
     ui.draggable.remove(); 
    } 
}); 

Exemple: http://jsfiddle.net/petersendidit/YDZJs/1/