JQueryUI sortable : 只允许排序到第二个列表但不能返回到第一个

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
    }
});

我知道我将不得不操作停止，接收可排序调用上的函数来实现这一点，但我不知道如何..

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/