javascript-JqueryUI拖动：游标与可拖动元素不在同一位置

我正在使用最新版本的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();
    }
});

解决方法:

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

这是更新的小提琴：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

标签：jquery-ui-draggable,jquery-ui,css,javascript,jquery
来源： https://codeday.me/bug/20191030/1966799.html