javascript - JQueryUI 可排序 : Allow sorting only to second list but not back to first

Question

我有两个列表，我想在其上使用 Jquery UI 进行排序。它应该工作的方式是列表一包含一些项目的选择，其中一些可能会被拖到列表 2。但是，在列表 1 中排序或从列表 2 拖回到列表 1 是不允许的，最后在列表 2 中排序是允许。

列表是这样的

<ul class="sortable" id = "list1">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
</ul>

<ul class="sortable" id = "list2">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    <li> Item 4 </li>
</ul>

我当前的可排序调用如下所示

$('#list1, #list2').sortable({
    helper: "clone",
    placeholder: "selected-option",
    forcePlaceholderSize: true,
    dropOnEmpty: true,
    connectWith: '.sortable',
    tolerance: "pointer",
    revert: true,
    cursor: "move",
    receive: function (event, ui) {
        // existing logic

    },
    update: function (event, ui) {
        // existing logic
    }
});

我知道我将不得不在 sortable 调用上操纵停止、接收函数来实现这一点，但我不知道如何......

Answer 1

$('#list1, #list2').sortable({
  helper: "clone",
  placeholder: "selected-option",
  forcePlaceholderSize: true,
  dropOnEmpty: true,
  connectWith: '.sortable',
  tolerance: "pointer",
  revert: true,
  cursor: "move",
  beforeStop: function (event, ui) {
    if($(ui.helper).parent().attr('id') === 'list1' && $(ui.placeholder).parent().attr('id') === 'list1')
       return false;
    else if($(ui.helper).parent().attr('id') === 'list2' && $(ui.placeholder).parent().attr('id') === 'list1')
        return false;
  }
});

http://jsfiddle.net/py7FN/