页面顶部不拖动时光标位置和可拖动位置不一样答案

【问题标题】：Cursor position and draggable position are not the same when not dragging at the top of the page页面顶部不拖动时光标位置和可拖动位置不一样
【发布时间】：2014-07-16 12:46:20
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery css jquery-ui draggable

【解决方案1】：

抱歉，我在发布我的问题后发现了这个：JqueryUI Drag: Cursor not at the same position as draggable element

我想用这条线：

<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>

一切正常，所以它必须是旧版本。所以这个bug在1.9.2修复了。

【讨论】：