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");
   }
});

Answer 1

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.