可使用连接列表排序的 Jquery ui答案

【问题标题】：Jquery ui sortable with connected lists可使用连接列表排序的 Jquery ui
【发布时间】：2015-02-05 09:50:46
【问题描述】：

如何连接 2 个列表，以便我只能将列表 1 中的项目放入列表 2，包括列表 2 中的占位符，但不包括列表 1。

我知道有 connectWith，但我怎么能防止这些项目可以在 list1 中重新排序

【问题讨论】：

【解决方案1】：

您可以结合使用stop 和receive 事件以及使用cancel() 函数来完成此操作：

$("#list1").sortable({
    connectWith: ".sortables",
    stop: function(e, ui) {
        if ( $(ui.item).parent().is(this) ) {
            $(this).sortable("cancel");
        }
    },
    receive: function(e, ui) {
        $(ui.sender).sortable("cancel");
    }
});
$("#list2").sortable({connectWith: ".sortables"});

解释：stop 用于检查是否对源自同一小部件的元素进行排序； receive 用于检查是否对源自其他小部件的元素进行排序。

这是一个小提琴示例：http://jsfiddle.net/hrvj2qnd/

文档参考：http://api.jqueryui.com/sortable/

【讨论】：

谢谢，有没有办法阻止 list1 中的占位符？
你说的防止占位符是什么意思？
开始拖动时到项目之间的间隙。
你可以使用placeholder 选项和你想要的任何css：jsfiddle.net/hrvj2qnd/1，jsfiddle.net/hrvj2qnd/2

【解决方案2】：

最终解决方案：http://jsbin.com/volote/1/edit?html,css,js,output

$("#sortable1, #sortable2").sortable({
  connectWith: "#sortable2",
  helper: 'clone',

  placeholder: 'gap',
  forcePlaceholderSize: true,
  start: function(e, ui) {
    ui.item.show();
  },

  stop: function(e, ui) {
    if (ui.item.parent().is("#sortable1")) {
      $(this).sortable("cancel");
    }else{ 
     console.log(ui.item.text())
     console.log(ui.item.index())
    }
  },

  receive: function(e, ui) {
    if (ui.item.parent().is("#sortable2")) {
      console.log(ui.item.text())
      console.log(ui.item.index())
      ui.item.clone().insertAfter(ui.item);
      $(ui.sender).sortable("cancel");
    }
  }
})

$("#sortable2").sortable({
  helper: 'original',
})

【讨论】：