Get the element where the sortable element is dropped

Question

I am using jquery's sortable plugin with two different lists. I can drop one list's item to another list.

suppose I have two lists

List1-:  Item1, Item2, Item3, Item4

List2-: ItemList1, ItemList2, ItemList3

When I drag item2 over ItemList2 new list will be

List2-: ItemList1, Item2, ItemList2, ItemList3

I want to get ItemList2 (where the Item2 was dropped).

Here is my code

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

and jquery

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

Answer 1

As per your sample, You can access the item next to dropped element using the next() method. Inside the receive or update callbacks, the item property of second argument refers to the element which is dropped. You can access the next element like 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> 

---

Side note: disableselection() is deprecated as of jqueryui 1.9 and the doc explicitly says:

"Disabling text selection is bad. Don't use this."