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()。

＆＃13;

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

＆＃13;

.selected {
  background: red !important;
}

＆＃13;

<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>

＆＃13;

旁注：自{jqueryui 1.9起，我们已弃用disableselection()，并且文档明确说明：

＆＃34;禁用文字选择很糟糕。不要使用它。＆＃34;

获取可放置可排序元素的元素

1 个答案: