Jquery Sortable：连接列表，具有基于原始列表源的限制

Question

我有两个可排序的列表，A和B，使用Jquery的Sortable创建。

这就是我需要的：

列表A中开头的项目在列表A和列表B之间应该是可排序的（也是来回的）。但是，列表B中开头的项目永远不应该移动到列表A.

http://jsfiddle.net/f6hLaw7t/

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">A: Item 1</li>
  <li class="ui-state-default">A: Item 2</li>
</ul>


<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">B: Item 1</li>
  <li class="ui-state-highlight">B: Item 2</li>
</ul>

$(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
});

Answer 1

以下示例分为两个主要部分：标识每个可拖动元素的原点，检查是否允许放置。

识别原点

首先，我们需要从每个要拖动的元素中识别原点。在这种情况下，原点是首先包含元素的列表的id属性。该值将存储在名为data-origin的属性中。

$('.connectedSortable').find('li').attr('data-origin', function () {
    var $parent = $(this).parents('ul');
    return '#' + $parent.attr('id');
});

检查是否允许丢弃

您可以使用receive事件来实现算法，该算法将验证是否允许将该元素放入列表中。

要取消放置，只需调用方法.cancel()。

为了使示例更通用，我在每个列表中创建了一个额外的属性data-allow-from，指示它可以从哪些列表中接收元素。

然后我们创建一个简单的回调函数，该函数将在每个列表的receive事件上调用，该事件获取被删除元素的来源并检查它是否在允许列表中。

实施例

function onReceive(event, ui) {

  var receiver = $(event.target),
    allowFrom = receiver.data('allow-from').split(',');

  var origin = $(ui.item).data('origin');

  var isAllowed = false;

  allowFrom.forEach(function(element) {
    if (element === origin) {
      isAllowed = true;
      return;
    }
  });

  if (!isAllowed) {
    $(ui.sender).sortable("cancel");
  }

}

$(function() {

  var opts = {
    connectWith: ".connectedSortable",
    receive: onReceive
  };

  $('.connectedSortable').sortable(opts).disableSelection();

  $('.connectedSortable').find('li').attr('data-origin', function() {
    var $parent = $(this).parents('ul');
    return '#' + $parent.attr('id');
  });

});

.connectedSortable {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
}
.connectedSortable li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

<div>
  <h1>ONLY A items</h1>
  <ul id="sortable1" class="connectedSortable" data-allow-from="#sortable1">
    <li class="ui-state-default">A: Item 1</li>
    <li class="ui-state-default">A: Item 2</li>
  </ul>
</div>

<div>
  <h1>A and B items</h1>
  <ul id="sortable2" class="connectedSortable" data-allow-from="#sortable1,#sortable2">
    <li class="ui-state-default">B: Item 1</li>
    <li class="ui-state-default">B: Item 2</li>
  </ul>
</div>

<div>
  <h1>A, B and C items</h1>
  <ul id="sortable3" class="connectedSortable" data-allow-from="#sortable1,#sortable2,#sortable3">
    <li class="ui-state-default">C: Item 1</li>
    <li class="ui-state-default">C: Item 2</li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">