JqueryUI拖动：光标的位置与可拖动元素不一致

Question

JqueryUI拖动：光标的位置与可拖动元素不一致

javascriptjquerycssjquery-uijquery-ui-draggable

3

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

正如您所看到的，我正在创建一些带有项目的堆栈。现在，如果这些堆栈只是在body内-我的意思是div.allstacks在body内，那么就没有问题。但是，一旦我把所有这些堆栈放在div#left-panel中，光标失去焦点的问题就开始了。

这意味着现在当我拖动一个项目时，在水平滚动之后，我的鼠标光标不在可拖动注释的相同位置。

现在问题来了：

Screenshot of the problem

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();
    }
});

- Devesh Kumar

2

嗨，Devesh，这是 jQuery UI 中的一个五年前存在的漏洞，所有可能的修复方法都在这里提供：https://dev59.com/mW025IYBdhLWcg3wzZP2。 - Konrad Dzwinel

谢谢。我会仔细查看！ - Devesh Kumar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Devesh Kumar · Accepted Answer

当我试用并阅读@konrad提供的链接时，我发现这是Jquery UI中的一个bug，即使在最新版本中也存在。只要我开始使用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。