use draggable divs with jqueryUI sorting and initial loading (the cursor is located at a distance from divs in col-xs-6)

Question

I want to make draggable divs using jquery UI and bootstrap like this fiddle, but when I want to drag the third divs at the end, the distance from the cursor is required.

 $(function() { $( ".columns" ).sortable({ }); }); 

Answer 1

I think you can use cursorAt: {left: Value, top: Value} to set the location of the mouse

Answer 2

I had the same problem. I solved this by adding these options

 $("#sortableList").sortable({ appendTo: "body", helper: "clone", scroll: false, cursorAt: {left: 5, top: 5}, start: function(event, ui) { if(! $.browser.chrome) ui.position.top -= $(window).scrollTop(); }, drag: function(event, ui) { if(! $.browser.chrome) ui.position.top -= $(window).scrollTop(); } }).disableSelection(); 

It seems some versions of jquery-ui have a bug in drag-and-drop functionality. And sorting functionality depends on draggable.

For more, see jQuery draggable shows helper in the wrong place after scrolling page.

Answer 3

This is an updated script: http://jsfiddle.net/h2mj2up6/1/

You have provided a class column for the sortable div, and the column class does not make any difference. So I just upgraded this class to a liquid-line, which is perfect for working with responsiveness, and you won't have a spacing problem when dragging these divs

 $(function() { $( ".row-fluid" ).sortable({ }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div class="col-xs-6" style="background-color:red;"> first first first first first first first first </div> <div class="col-xs-6" style="padding:0px;margin:0px;right:0px;left:0px;"> <div class="row-fluid"> <div class=" col-xs-6" style='background-color:green;'> second</br> second second</br> second second</br> second </div> <div class=" col-xs-6" style='background-color:blue;'> third<br> third<br> third<br> third<br> third<br> third<br> </div> </div> </div>