Question

我实际上使用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]
});

Answer 1

这是一个错误。如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的实现中。

Answer 2

我建议你给你当前拖动的项目提供一个活跃的css类。

$(window).scroll(function(){
    $('.draggableItm').css({
        'top': ($(document).scrollTop() + $('.draggableItm').height())+'px'
    });

    $('.summary').text($(document).scrollTop()+'px');
});

http://jsfiddle.net/YLer3/1/

在拖动过程中将项目保留在鼠标下方

2 个答案: