Ich habe ein flüssiges Bootstrap-Layout mit drei Span4's in einem Reihen-Fluid-Div. Das sieht und funktioniert so, wie ich es erwarten würde. Der Aufruf von .sortable(); für das Zeilenelement funktioniert, aber beim Ziehen wird das Layout merklich unvorhersehbar. Hier ist ein Link: Ссылка . Wenn du Item 3 nimmst und nach links bewegst, verhält es sich genau so, wie ich es erwartet hätte. Wenn du jedoch den ersten Gegenstand nimmst und ihn nach rechts bewegst, bricht die Hölle aus und Punkt 3 bewegt sich in die nächste Reihe.
JSFiddle: Ссылка
HTML:
%Vor%Javascript:
%Vor%CSS:
%Vor%Das Problem scheint in der .container-fluid-Klasse zu liegen, der Bootstrap css hat links und rechts padding, was das Problem verursacht.
Dies ist die Regel von bootstrap.min.css:
%Vor%Sie können mit diesen neuen Regeln in Übereinstimmung mit diesem Beitrag versuchen: Jquery UI sortierbar mit Bootstrap-Fehlern :
%Vor%Wenn Sie ein zusätzliches Padding benötigen, können Sie Ihren Code in ein externes div einfügen.
Guter Code
Obwohl ich die obige Antwort akzeptierte, wollte ich die Lösung, die ich mir in der Zwischenzeit ausgedacht hatte, zur Verfügung stellen, da ich denke, dass sie beim Debuggen anderer jQuery + Twitter Bootstrap-Kollisionen hilfreich sein könnte. Anstatt den Rand links auf alle .ui-sortierbaren Platzhalter anzuwenden, habe ich sie während des start -Ereignisses angewendet und sie während des stop -Ereignisses des sortierbaren Objekts entfernt. Ich habe auch appendTo verwendet, um anzugeben, dass der Helfer an den Dokumentkörper angehängt werden soll und nicht an den row-fluid .
CSS
%Vor%JavaScript
%Vor%Link: Ссылка
Tags und Links jquery jquery-ui twitter-bootstrap jquery-ui-sortable fluid-layout