jquery ui glisser-déposer + sortable

Je suis en train de faire un glisser-déposer sortable trop. Je peux faire glisser à partir de div 1 à 2 et de la division 2 à la div 1, mais parce que j'utilise clone je ne peux pas sortable travail.

Des idées?

$(document).ready(function() {

    $("#qselected").sortable();
    $("#qselected").disableSelection();

    $(".qitem").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $("#qselected, #qlist").droppable({
        hoverClass : 'ui-state-highlight',
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();

            $(".qitem").draggable({
                containment : "#container",
                helper : 'clone',
                revert : 'invalid'
            });
        }
    });
});

Démo Live: http://jsfiddle.net/6xXPq/4/

OriginalL'auteur Jordi Kroon | 2013-11-28

  1. 7

    Pour que cela fonctionne, vous ne pouvez pas avoir des éléments à la tombée de la boîte de déplaçable à nouveau, parce que vous ne savez pas si il a essayé de trier, ou faites-le glisser.

    Ici est du code qui fonctionne : Exemple JSFiddle

    $(document).ready(function() {
    $("#qselected").sortable();
    $("#qselected").disableSelection();

    $(".qitem").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $("#qselected, #qlist").droppable({
        hoverClass : 'ui-state-highlight',
        accept: ":not(.ui-sortable-helper)",
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();
        }
    });
});

    Pour obtenir que cela fonctionne correctement, vous ne pouvez pas permettre à la baisse gestionnaire d'accepter des articles qui sont en cours de tri, pour ce faire, nous ajoutons la accept filtre pour le drop, gestionnaire de : 

    accept: ":not(.ui-sortable-helper)",

    Cela signifie maintenant que vous pouvez faire glisser des éléments à partir de la case du bas vers le haut et puis trier le haut de la boîte. Cependant, vous ne pouvez plus déplacer les éléments à l'extérieur de la zone de texte supérieure.

    Vous aurez à concevoir une nouvelle méthode pour les supprimer (il peut probablement être réalisée à l'aide d'un drapeau de supprimer le passage entre le Draggable/Sortable fonctionnalités de la box)

    Votre code ne peut pas ne pas être glissés et déposés retour de div2 à div1

    OriginalL'auteur Nunners

  2. 3

    J'ai la même question et j'ai trouvé ce l'article et de démonstration

    Pas besoin d'utiliser déplaçable et droppable, il suffit d'utiliser le code suivant (voir démo):

    $('#example-1-4 .sortable-list').sortable({
        connectWith: '#example-1-4 .sortable-list',
        containment: '#containment'
    });

    Le point clé est l'option connectWith de sortable()
    Espérons que cette aide.

    Très utile, merci

    OriginalL'auteur Terry Lin