javascript - JqueryUI 拖动 : Cursor not at the same position as draggable element

Question

我正在使用最新版本的 JQuery 和 JQuery UI 来了解拖放功能。我遇到了一个小问题 - 主要是由于鼠标拖动。

As you can see that I am creating stacks with some items in it.

Now if these stacks are just inside body - I mean div.allstacks is in body there is no problem. But as soon as I put all these stacks inside a div#left-panel, the problem of cursor losing focus starts.

This means now when I drag an item, after horizontal scroll - My mouse cursor is not at the same position of draggable note.

问题来了:

JSFiddle 链接 [在没有 div 的情况下工作#left-panel]: http://jsfiddle.net/deveshz/YvmFf/

JSFiddle 链接 [不适用于 div#left-panel] http://jsfiddle.net/deveshz/YvmFf/1/

---

这是代码。

Javascript:

var zindex = 10; 
$(".item").draggable({
    containment: "body",
    scroll: true,
    revert: function (event, ui) {
        $(this).css("border", "none");
        return !event;
   },
    start: function (event, ui) {
        $(this).css("z-index", zindex++);
        $(this).css("border", "2px solid #333");
    }
});

 $(".stack_items").droppable({
    hoverClass: "over",
    drop: function (event, ui) {
        $("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
        $(ui.draggable).remove();
    }
});

Answer 1

当我尝试阅读@konrad 提供的链接时，我发现它是 Jquery UI 中的一个错误——即使是在它的最新版本中也是如此。我一开始使用Jquery UI 1.9.2版本问题就解决了

这是更新后的 fiddle :http://jsfiddle.net/deveshz/YvmFf/2/

使用相同的代码:

var zindex = 10; 
$(".item").draggable({
    containment: "body",
    scroll: true,
    revert: function (event, ui) {
        $(this).css("border", "none");
        return !event;
   },
    start: function (event, ui) {
        $(this).css("z-index", zindex++);
        $(this).css("border", "2px solid #333");
    }
});

 $(".stack_items").droppable({
    hoverClass: "over",
    drop: function (event, ui) {
        $("<li class='item'></li>").html(ui.draggable.html()).appendTo(this);
        $(ui.draggable).remove();
    }
});

它使用来自 http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js 的 Jquery 版本 1.9.2|