Jquery ui Jquery ui可与连接列表排序

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

---

我知道有

connectWith

，但我如何防止列表1中的项目被重新排序您可以通过组合

停止

和

接收

事件，并使用

取消（）

功能来执行此操作：

$("#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

用于检查是否对源自其他小部件的元素进行排序

这里有一个小提琴的例子：

文件参考：最终解决方案：

---

谢谢，还有什么方法可以阻止列表1中的占位符？你说的阻止占位符是什么意思？开始拖动时与项目之间的间隙。你可以使用

占位符

选项和任何你想要的css:，

$("#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',
})