jQuery UI sortable: Move-Klon, aber halten Sie original

Nun habe ich eine Spalte von Elementen, und ich habe es bis zu dem Punkt, wo, wo ich ziehen, es Klone, aber wenn ich fallen, so löscht das original.

$( ".column" ).sortable({
        helper: 'clone',
        connectWith: ".column",
        connectWith: ".grid",
        start: function(e, ui){
            ui.placeholder.height(ui.item.height());
             $(".column" ).find('.portlet:hidden').show()
             console.log('started')
        },
        stop: function(event, ui) {
            $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
        }
    });

Wie kann ich das original behalten, wo seine an (ohne re-anfügen an die Spalte) und die Klon-Bewegung an die gewünschte Position?

  • Hüten Sie sich auf ungültige HTML (doppelte IDs) bei der Nutzung clone().
  • Diese Frage ist sehr ähnlich und hat eine tolle Antwort-Blick auf die top-gewählt, nicht das akzeptiert man.
InformationsquelleAutor | 2013-01-07
  1. 13

    Verwenden $(this).sortable('cancel') im inneren der stop-event-handler, um wieder das Einzelteil zurück zu der ursprünglichen Liste/position. http://api.jqueryui.com/sortable/#method-cancel

    $( ".column" ).sortable({
        helper: 'clone',
        connectWith: ".column",
        connectWith: ".grid",
        start: function(e, ui){
            ui.placeholder.height(ui.item.height());
             $(".column" ).find('.portlet:hidden').show()
             console.log('started')
        },
        stop: function(event, ui) {
            $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
            $(this).sortable('cancel');
        }
    });

    UPDATE:

    Anhängen, das element der zweiten Liste in der Lage, die Sache wurde fallen, tun Sie etwas wie folgende:

    stop: function(event, ui) {
            var toListID = ui.item.parent().attr('id');   
            var idx = $('#' + toListID).children().index($(ui.item[0]));
            if(idx== -1)return;
            var elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone');
            $('#' + toListID).children(':eq('+idx+')').after(elm);
            $(this).sortable('cancel');
        }

    Sehen fiddle für die vollständige demo

    • Dies scheint so brechen Sie das geklonte element. Wenn ich drop-nichts geht in der drop-Position.
    • Für mich funktioniert: jsfiddle.net/adamb/tZSN7/11
    • Ich sehe, was denken Sie jetzt, ich habe versucht, die Lösung zu finden, bevor Anhängen, aber er muss in die Lage der eigentliche drop. Nicht nur Hinzugefügt, um den Boden. Irgendwelche Ideen auf, wie zu vermeiden, anfügen?
    • Siehe mein update zu der ursprünglichen Antwort.
    • Für jQuery < 1.8, müssen Sie möglicherweise verwenden $('.list2').children().eq(idx).after(elm);. Ich denke, das ist etwas effizienter als auch (nach den docs).
    • Vielen Dank für das update mit einem expliziten Beispiel für die Kopie angegebenen Position! Sehr hilfreich!
    • es gibt ein problem mit Ihrer Geige. das ist, wenn Sie Elemente verschieben nach oben und unten in Liste1, werden Sie dupliziert in liste2, unabhängig davon, ob Sie ziehen oder nicht. wie wollen Sie das verhindern?
    • Scheint, dass Sie eine doppelte connectWith Eigenschaft in $.fn.sortierbare definition.

    InformationsquelleAutor adamb
Schreibe einen Kommentar