5

I want to make a draggable divs with jquery UI and bootstrap like this fiddle but when I want to drag third divs at the end it takes distance from cursor.

$(function() {
    $( ".columns" ).sortable({
    });
});
Cœur
  • 37,241
  • 25
  • 195
  • 267
m hadadi
  • 949
  • 2
  • 10
  • 22

3 Answers3

2

I think you can use cursorAt: { left: Value , top: Value} for set your mouse location

foozhan
  • 85
  • 1
  • 14
1

I had same problem. I have solved it by adding this 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 draggable functionality. And sortable functionality depends on draggable.

For more details look this jQuery draggable shows helper in wrong place after page scrolled

Community
  • 1
  • 1
Alexey Muravyov
  • 1,106
  • 13
  • 17
0

This is updated fiddle : http://jsfiddle.net/h2mj2up6/1/

You have given class column to sortable div, and column class is acutally not having any meaning. So i have just updated that class to row-fluid which is perfect to work with responsiveness and you will not have problem of spacing while dragging those 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>
Innodel
  • 1,416
  • 12
  • 16