JqueryUI Drag：Cursor与draggable元素不在同一位置

Question

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

  

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

     

现在，如果这些堆栈只是在体内 - 我的意思是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) {
        $("<li class='item'></li>").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) {
        $("<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