当不在页面顶部拖动时，光标位置和可拖动位置不同

Question

问题如下：我有一些可拖动元素和下面的带有droppables的列表。 当我位于页面顶部时，一切都按预期工作，但是当我向下滚动时，滚动条和浏览器滚动条上箭头之间的距离将在拖动时在光标和可拖动元素之间添加。 如何解决这个问题？ 我创建了一个小提琴，但是由于jsfiddle使用带有滚动条的相对框，因此您不会看到该bug。 但是也许有人已经遇到了同样的问题...

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

码：

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

抱歉，我在发布问题后发现了这个问题： JqueryUI拖动：游标与可拖动元素不在同一位置

我认为使用该行：

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

会自动使用最新版本，但将其替换为：

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

一切正常，因此必须是旧版本。 因此，该错误已在1.9.2中修复。