jQuery UI Sortierbar und Bootstrap-Gitter

Question

Ich habe ein Dashboard-Grid in BS erstellt und möchte die Kacheln mithilfe von Sortable ziehen können - das funktioniert in Ordnung, aber das Verhalten ist wirklich unvorhersehbar.

Ich habe ein 6 x 4 Raster und wenn ich beispielsweise ein Element von Zeile 2 in Zeile 1 verschiebe, dann bewegt sich das Element korrekt, aber das Element, das es ersetzt, springt in Zeile 2 und alles andere bewegt sich eine Reihe runter, so dass ich jetzt mit 6 x 5 Raster enden. In den meisten Fällen bin ich nicht wirklich in der Lage, Gegenstände direkt in Reihe 2 zu bewegen, also muss ich anfangen, alle anderen Kacheln um jeden herum zu bewegen, die ähnliche Probleme haben wie oben, was es wieder schlimmer macht.

Der Code, den ich für sortierbare bin mit ist:

$(function() { 
    $(".sortable-heading").sortable({ 
     connectWith: '.heading-sortable', 
     items: '.panel', 
     helper: 'original', 
     cursor: 'move', 
     handle: '.panel-title, [data-action=move]', 
     revert: 100, 
     grid: [ 10, 10 ], 
     delay: 150, 
     containment: '#home-dash', 
     forceHelperSize: true, 
     opacity: 0.7, 
     placeholder: 'sortable-placeholder', 
     forcePlaceholderSize: true, 
     tolerance: 'pointer', 
     start: function(e, ui){ 
      ui.placeholder.height(ui.item.outerHeight()); 
     } 
    }); 
}); 

vielmehr alle HTML-Code als Posting, ich habe eine Geige geschaffen dies in Aktion zeigt.

Wenn Sie das rote Feld in die obere Reihe bewegen, sehen Sie das Verhalten beim Hinzufügen einer zusätzlichen Zeile. Wenn Sie dann versuchen, das blaue Feld in die nun zweite Zeile zu ziehen, ist dies nicht möglich.

https://jsfiddle.net/mk3whz43/2/

Answer 1

Ich denke, die HTML-Struktur ist zu komplex für Sie es mit Ihrem aktuellen Code zu arbeiten. Wenn Sie ein Objekt verschieben, wird es an das übergeordnete Element div des Elements angehängt/vorangestellt, mit dem es ausgetauscht werden soll. Dadurch wird die Struktur des Inhalts durchbrochen.

Was Sie tun müssen, ist, speichern die Eltern div der Artikel, den Sie in einer Variable sortiert werden soll und an einem Update, .append das Zielelement dieser div. Sie werden immer noch das "Springen" sehen, wenn Sie die Sortierung einleiten, aber die eigentliche Sortierung funktioniert.

Hier ist der aktualisierte Code (Ich habe Kommentare in Code hinzugefügt, um zu erklären, was ich getan habe):

$(function() { 
    var startParent; 
    $(".sortable-heading").sortable({ 
    connectWith: '.heading-sortable', 
    items: '.panel', 
    helper: 'original', 
    cursor: 'move', 
    handle: '.panel-title, [data-action=move]', 
    revert: 100, 
    grid: [10, 10], 
    delay: 150, 
    containment: '#home-dash', 
    forceHelperSize: true, 
    opacity: 0.7, 
    placeholder: 'sortable-placeholder', 
    forcePlaceholderSize: true, 
    tolerance: 'pointer', 
    start: function(e, ui) { 
     ui.placeholder.height(ui.item.outerHeight()); 
     //Store the parent in a variable as we will be appending the target item to this in the "update" event. 
     startParent = $(ui.item).closest('.col-xs-2'); 
    }, 
    update: function(e, ui) { 
     //When an item is swapped, it may have been added before the existing item or after it. 
     //Check if the contents of the "next" item is not undefined. If it is undefined, it means 
     //the item was inserted before the existing item. 
     if ($(ui.item).next()[0] !== undefined) { 
     //next() is the existing item. 
     startParent.append($(ui.item).next()); 
     } else { 
     startParent.append($(ui.item).prev()); 
     } 
    } 
    }); 
}); 

Updated Fiddle

Answer 2

bhttoan,

Das Verhalten erwartet wird. Wenn Sie eine weitere hinzufügen col-xs-2. Der letzte Eintrag wird in die nächste Zeile verschoben. Um dies zu lösen, benötigen Sie ein einzelnes div mit der Klassenzeile für alle (4x6 = 24 Elemente). Dann bleibt Ihre Struktur erhalten.