Question

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

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

Answer 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/

Answer 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',
})

Jquery ui可以使用连接列表进行排序

2 个答案: