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

Question

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

假设我有两个清单

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> 

---

旁注：从jqueryui 1.9不推荐使用disableselection （） ，并且该文档明确指出：

“禁用文本选择是不好的。不要使用它。”