如何使用不同的类 div 进行排序答案

【问题标题】：How Connect sortable with different class div如何使用不同的类 div 进行排序
【发布时间】：2013-08-27 16:38:23
【问题描述】：

我对连接的可排序 div-s 有疑问。当我将项目从第一个可排序 div 拖动到另一个可排序 div 时，它可以工作。当我将它拖到第二个可排序但不放下它时会出现问题，而是尝试将项目移回第一个可排序 div，它移动到第二个可排序而不是第一个可排序。这是我的 jquery，我找不到解决这个问题的方法。这是连接排序的基本 jquery 代码，我在我的代码中使用过：

$(function() {
    $( ".sortable1" ).sortable({
        connectWith: ".sortable2",
        revert: false
    }); 
    $( ".sortable2" ).sortable({

    });

    $( ".sortable1,.sortable2" ).disableSelection();
});

最后是 jsFiddle 上的示例：http://jsfiddle.net/KtpJj/3/ 有什么建议吗？？

更新：当我像这样更改我的 jquery 代码时，会出现另一个问题...

$(function() {
  $( ".sortable1" ).sortable({
    connectWith: ".sortable2",
    revert: false
  }); 
  $( ".sortable2" ).sortable({
    connectWith: ".sortable1",
    revert: false
  });

$( ".sortable1,.sortable2" ).disableSelection();
});

是否可以拒绝从第二个 div 拖回第一个？为此，我必须删除表单最后一个 jquery 代码 { connectWith：“.sortable1”}。但在这种情况下，当我将项目从第一个 div 拖动到第二个而不将它们放在第二个上时，如果我将它从第一个和第二个 div 拖动而不是将其放在第二个 div 上，它将返回到第二个，但它有返回第一个 div。

【问题讨论】：

标签： jquery

【解决方案1】：

您也必须致电sortable 进行第二个：

$( ".sortable2" ).sortable({
    connectWith: ".sortable1",
    revert: false
});

您还需要从这些 div 中禁用 overflowing，因此我在您的 CSS 中添加了以下定义：

.sortable1 { overflow: hidden; }
.sortable2 { overflow: hidden; }

jsFiddle Demo

【讨论】：

感谢您的回答。还有一个问题。是否可以拒绝从第二个 div 拖回第一个？我认为为此我必须从您的代码中删除 { connectWith: ".sortable1" } ，但在这种情况下，当我将项目从第一个 div 拖到第二个而不将它们放在第二个时，而不是将其放在第二个 div 上我将它从第一个和第二个div拖走，它会回到第二个，但它必须回到第一个div。