JQuery UI sorts with bootstrap errors

Question

I need to make sortable divs in bootstrap layout. here is my code in jsfiddle: http://jsfiddle.net/6UkdR/

<div class="row-fluid"> <div id="sortable"> <span class="span3"> <div class="thumbnail"> </div> </span> <span class="span3"> <div class="thumbnail"> </div> </span> <span class="span3"> <div class="thumbnail"> </div> </span> </div> </div> <div class="row-fluid"> <div id="sortable"> <span class="span3"> <div class="thumbnail"> </div> </span> <span class="span3"> <div class="thumbnail"> </div> </span> <span class="span3"> <div class="thumbnail"> </div> </span> </div> </div> 

1) if you are trying to wrap the first or last div, the other divs are shifted.

2) how to connect both? with this code, I can only drag the div into one line, but I need to sort the div from all.

Answer 1

Sounds like a placeholder issue. I added a field fix:

 .ui-sortable-placeholder { margin-left: 0 !important; } 

Everything seems to be in order now.

Demo

And for sorting between lists you can use connectWith .