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 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中已经修复。

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

1 个答案: