Cursor position and draggable position are not the same when not dragging at the top of the page

Question

Following problem: I have some draggable elements and a list with droppables below. When I'm on top of the page everything works as expected but when I scroll a bit down the distance between the scrollbar and the upper arrow of the browser scrollbar is added between the cursor and the draggable element when dragging. How to fix this? I created a fiddle but since jsfiddle uses relative boxes with a scrollbar each you won't see the bug. But maybe someone had the same problem already...

http://jsfiddle.net/LP9ZQ/2/

Code:

HTML:

<div id="header"></div>
<div id="wrapper">
    <div id="content_box">
        <div class="drag_box">
            <div class="draggable" class="ui-widget-content" id="3453">                    
                 <img class="clip_minithumb" src="http://img3.wikia.nocookie.net/__cb20120725230829/spongebob/images/f/f5/SpongeBob_SquarePants_Smiling_-_Artwork.png"/>
                 <p class="clip_title">Draggable Element 1</p>                            
            </div>
        </div>

        <div class="drag_box">
             <div class="draggable" class="ui-widget-content" id="34576">                    
                  <img class="clip_minithumb" src="http://indervilla.com/home/2013/01/Spongebob-3D-HD.jpg"/>
                  <p class="clip_title">Draggable Element 2</p>
              </div>
        </div>
    </div>

    <div id="droppables_wrapper">
        <ul>
           <li class="droppable">Bla1</li>
           <li class="droppable">Bla2</li>
           <li class="droppable">Bla3</li>
           <li class="droppable">Bla4</li>                                    
        </ul>
    </div>
</div>

CSS:

#header{
    width:600px;
    height:200px;
}

.bold{
    font-weight: bold;
    cursor: copy;
}

body{
    overflow:auto;
}

#content_box{
    width:600px;
    height:300px;
}

.drag_box{
    position: relative;
    float: left;
    width: 265px; 
    margin-right: 31px;
    margin-bottom: 20px;   
}

.clone img{
    width:90px;
}

.drag_box img{
    width:90px;
}

.draggable{    
    cursor: move;
}

#droppables_wrapper{
    width:600px;  
    height:200px;
}

Javascript/jQuery:

$(".draggable").draggable({
   opacity: 0.7,
   helper: "clone",
   zIndex: 10000,
   appendTo: "body",
   revert: true,
   revertDuration: 200,
   start: function(e, ui) {
     $(ui.helper).addClass("clone");
   }
});

$(".droppable").droppable({
   accept: '.draggable',
   hoverClass: "bold",
   drop: function (event, ui) {
       var clip_id = ui.draggable.attr("id");
       var clip_title = ui.draggable.children("p").html();
       alert("The Clip " + clip_title + " (ID: " + clip_id + ") has been added to this room");
   }
});

score 0 · Answer 1 · edited May 23 '17 at 12:13

Sorry, I found this after posting my question: JqueryUI Drag: Cursor not at the same position as draggable element

I thought using the line:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

would automatically use the latest version but after replacing it with:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

everything worked fine so it had to be an older version. So the bug is fixed in 1.9.2.

Cursor position and draggable position are not the same when not dragging at the top of the page

1 Answers1