Is it possible to use bootstrap grid layout system in conjunction with the ability to sort JQuery UI?

Question

I have a liquid Bootstrap layout with three spans of 4 inside linear division. It looks and works as I expected. Call .sortable(); works in the row element, but when you drag it, the layout becomes strangely unpredictable. Here's the link: http://jsfiddle.net/dhilowitz/CwcKg/15/ . If you take Item # 3 and move it to the left, it will behave exactly as I expected. If you take Item # 1 and move it to the right, however, all the hell breaks and Item # 3 goes to the next line.

JSFiddle: http://jsfiddle.net/dhilowitz/CwcKg/15/

HTML:

 <div class="container-fluid"> <div class="row-fluid sortme"> <div class="span4 element"><h2>Item #1</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> <!--/span--> <div class="span4 element"><h2>Item #2</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> <!--/span--> <div class="span4 element"><h2>Item #3</h2><p>Lorem ipsum dolor sit amet, consectetur</p></div> <!--/span--> </div> <!--/row--> </div> <!--/.fluid-container--> 

JavaScript:

 $(".row-fluid").sortable(); 

CSS

 .element > h2 { cursor:pointer; background-color:#cccccc; border-radius:5px; padding: 0px 5px; } 

Answer 1

The problem seems to be in the .container-fluid class, bootstrap css has left and right padding that causes the problem.

This is the rule bootstrap.min.css:

 .container-fluid { padding-right: 20px; padding-left: 20px; } 

You can try using these new rules according to this post: JQuery UI is sorting with boot errors :

 .ui-sortable-placeholder { margin-left: 0 !important; } .container-fluid { padding-right: 0; padding-left: 0; } 

If you need an add-on, you can put your code in an external div.

Good code

Answer 2

Although I accepted the answer above, I would like to provide a solution that I came across in a period of time, since, in my opinion, this can be useful when debugging other jQuery + Twitter Bootstrap collisions. Instead of applying margin-left to all .ui-sortable-placeholder, I applied them during the start event and removed them during the sortable stop event. I also used appendTo to indicate that a helper should be added to the body of the document, and not inside the row-fluid .

CSS

 .real-first-child { margin-left:0 !important; } 

Javascript

 $(".row-fluid").sortable({ placeholder: 'span4', helper: 'clone', appendTo: 'body', forcePlaceholderSize: true, start: function(event, ui) { $('.row-fluid > div.span4:visible:first').addClass('real-first-child'); }, stop: function(event, ui) { $('.row-fluid > div.real-first-child').removeClass('real-first-child'); }, change: function(event, ui) { $('.row-fluid > div.real-first-child').removeClass('real-first-child'); $('.row-fluid > div.span4:visible:first').addClass('real-first-child'); } }); 

Link: http://jsfiddle.net/dhilowitz/s7Kch/