JqueryUI拖动：光标与draggable元素不在同一位置

我正在使用最新版本的JQuery和JQuery UI来理解拖放function。 我面临一个小问题 – 主要是由于鼠标阻力。

正如您所看到的，我正在创建包含其中一些项目的堆栈。

现在，如果这些堆栈只是在体内 – 我的意思是div.allstacks在体内是没有问题的。 但是一旦我将所有这些堆栈放在div＃left-panel中，光标失去焦点的问题就开始了。

这意味着现在当我拖动项目时，水平滚动后 – 我的鼠标光标不在可拖动音符的相同位置。

现在问题是：

JSFiddle Link [无div工作＃左侧面板]： http ： //jsfiddle.net/deveshz/YvmFf/

JSFiddle Link [不使用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) { $("
").html(ui.draggable.html()).appendTo(this); $(ui.draggable).remove(); } }); 

Answer 1

当我试着阅读@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) { $("
").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