在拖动时将项目保持在鼠标下方

Keep the item under the mouse during drag

本文关键字：鼠标 项目 拖动      更新时间：2023-09-26

我实际上使用jQuery .draggable()方法来拖动一些项目。

我的容器比我的窗口大，所以，我有一个滚动条在右边，像往常一样。现在，如果我想把一个项目从顶部拖到底部，我需要点击它并同时滚动鼠标。

正如你在这里看到的:http://jsfiddle.net/YLer3/如果你拿起一个项目，你开始滚动，项目停留在他的第一个位置，你需要移动鼠标来把它带到它。

有一种方法保持项目在鼠标下，即使你滚动?

示例html代码:

<div class="container">
    <div class="draggableItm">
</div>

示例css代码:

.container{
    height:1650px;
}
 .draggableItm{
    background-color:red;
    width: 100px;
    height:100px;
    border:1px solid black;
}

示例jQuery代码:

$('.draggableItm').draggable({
    grid:[20,20]
});

这是一个bug。如http://bugs.jqueryui.com/ticket/9379

所述

你应该修改

if (!this.offset.scroll) {


if (!this.offset.scroll || scroll.scrollTop() != this.offset.scroll.top || scroll.scrollLeft() != this.offset.scroll.left) {
jquery.ui.draggable.js中_convertPositionTo和_generatePosition的实现

我建议你给你当前拖动的项目一个css类，如active 

$(window).scroll(function(){
    $('.draggableItm').css({
        'top': ($(document).scrollTop() + $('.draggableItm').height())+'px'
    });
    $('.summary').text($(document).scrollTop()+'px');
});
http://jsfiddle.net/YLer3/1/

相关文章：