Hi I have two lists can drag and drop to each other. I need to get the value of the name on the dropping item (source selection). I only can get the source list id. Would you tell me.
Let say I move the "Item 2" from sortbale1 to sortable2. I want to get the value of the name is F.
There is my html:
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default" name="B>Item 1</li>
<li class="ui-state-default" name="F">Item 2</li>
<li class="ui-state-default" name="X">Item 3</li>
<li class="ui-state-default" name="G">Item 4</li>
<li class="ui-state-default" name="H">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" name="a">Item A</li>
<li class="ui-state-highlight" name="b">Item B</li>
<li class="ui-state-highlight" name="c">Item C</li>
<li class="ui-state-highlight" name="d">Item D</li>
<li class="ui-state-highlight" name="e">Item E</li>
</ul>
There are script:
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
receive: function (event, ui) {
var sourceIndex = ui.sender.children('option:selected').index();
//let name = ui.sender.children('option:selected').attr('name'); doesn't work
},
update: function (event, ui) {
}
}).disableSelection();
2
Answers
please use ui.item to refer to the current dragged element as given in the documentation https://api.jqueryui.com/sortable/#event-receive
you can also console.log(ui) and observe all the content once.
This is how I redefined the
receive
function to show the element being dropped and to which list:Demo: