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

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 （） ，並且該文檔明確指出：

“禁用文本選擇是不好的。不要使用它。”