Faire en sorte qu'un dropable jQuery accepte les éléments d'un sortable qui utilise connectWith

Question

J'ai une liste triable qui utilise la fonction connectWith pour s'assurer qu'il ne peut être trié que dans ses propres types de liste.

J'essaie maintenant de créer un élément poubelle qui apparaît en bas de la fenêtre lorsqu'un élément est trié. Cet élément est en dehors du contexte des listes et supprime simplement tout élément qui est déposé sur lui. La fonctionnalité souhaitée est identique à la suppression d'un raccourci sur le bureau d'un téléphone Android, si vous êtes familier avec cela.

Le problème est que, bien que ma poubelle soit un droppable qui accepte '*', mon sortable ne reçoit que l'instruction de connectWith d'autres éléments '.dropZone' uniquement, ce qui signifie que je ne peux pas faire en sorte qu'un de mes éléments triables provoque un état de survol sur l'élément poubelle.

J'ai essayé de transformer chaque élément à trier en un élément à glisser sur la page d'accueil. start mais, bien entendu, je ne fais pas glisser ce draggable à ce moment précis et il n'est donc pas activé. Est-il possible de satisfaire aux deux exigences ou vais-je devoir détecter manuellement le survol de la poubelle ?

Answer 1

Depuis connectWith accepte un sélecteur, vous pouvez lui fournir un sélecteur qui sélectionne à la fois les autres 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/

Answer 2

Et si on faisait de la poubelle une .dropZone également ? Alors vous auriez un véritable drop et vous pourriez gérer la suppression correctement.

Il peut y avoir des effets secondaires à faire de la poubelle un objet triable, mais je pense qu'ils devraient être faciles à contourner.

Si cela ne répond pas à vos besoins, pourriez-vous nous proposer une démo ? quelque part Nous savons donc exactement ce que nous devrons contourner pour garder votre structure intacte, tout en ajoutant les fonctionnalités dont vous avez besoin.