获取可排序元素被丢弃的元素

Question

我正在使用带有两个不同列表的 jquery 的可排序插件。 我可以将一个列表的项目放到另一个列表中。

假设我有两个列表

List1-:  Item1, Item2, Item3, Item4

List2-: ItemList1, ItemList2, ItemList3

当我将 item2 拖到 ItemList2 上时，新列表将是

List2-: ItemList1, Item2, ItemList2, ItemList3

我想获取 ItemList2（Item2 被丢弃的地方）。

这是我的代码

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id="a">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">ItemList 1</li>
    <li class="ui-state-highlight">ItemList 2</li>
    <li class="ui-state-highlight">ItemList 3</li>
    <li class="ui-state-highlight">ItemList 4</li>
    <li class="ui-state-highlight">ItemList 5</li>
</ul>

和jquery

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

Answer 1

根据您的示例，您可以使用 next() 方法访问已删除元素旁边的项目。在receive 或update 回调中，第二个参数的item 属性指的是被删除的元素。您可以访问下一个元素，例如ui.item.next()。

$("#sortable1, #sortable2").sortable({
  connectWith: ".connectedSortable",
  update: function(event, ui) {
    ui.item.next().addClass("selected");
  }
});

.selected {
  background: red !important;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default" id="a">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">ItemList 1</li>
  <li class="ui-state-highlight">ItemList 2</li>
  <li class="ui-state-highlight">ItemList 3</li>
  <li class="ui-state-highlight">ItemList 4</li>
  <li class="ui-state-highlight">ItemList 5</li>
</ul>

---

旁注：disableselection() 自 jqueryui 1.9 起已弃用，文档明确指出：

“禁用文本选择很糟糕。不要使用它。”