Question

我使用jQuery 1.9.1和jQuery UI 1.9.2。在我的应用程序中，我有超过1个列表，可以有超过1行。正如您在official demo中所看到的：它适用于一个列表。但我用2个列表尝试了它，它不起作用。第1个列表中的项目无法移动到第2个。我创建了this test page以获得更好的解释。感谢。

我简单的JS：

$(function() {
    $('#sort1, #sort2').sortable().disableSelection();
});

另外，当我添加connectWith: '.sort' ui时，错误的定义放置位置。如果我将float: left添加到列表中，我就无法从一个列表移动到另一个列表。

Answer 1

您需要在插件的选项中设置connectWith。我已更新您的原始JSFiddle：http://jsfiddle.net/fjjqM/1/

此刻有点奇怪，所以您可能需要查看相关的官方文档以获取更多信息：http://jqueryui.com/sortable/#connect-lists

Answer 2

试试这篇文章，它有和你一样的问题：

JQuery sortable breaks when using connectWith on sortable grids

nick_w建议您在第{7}行替换jquery.ui.sortable.js中的一些代码

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else { ...

与

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else if(this.currentContainer != this.containers[innermostIndex]) { ...

编辑：我已经改变了你的jsfiddle以使用旧版本的jQuery UI，它运行正常。这应该可以解决你的问题。

http://jsfiddle.net/fjjqM/6/

使用jQuery UI创建多个可排序的网格

2 个答案: