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/

JQueryUI可排序：仅允许排序到第二个列表但不回到第一个列表

1 个答案: