3

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

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

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

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

现在问题来了：

问题截图

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

1 回答 1

4

当我尝试并阅读@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

于 2013-10-20T11:37:20.057 回答