jQuery UI Sortable and two connected lists

This interestingly does the job. I would have thought that cancel would move the item back to its original list, but the receive event is fired very late and stops the other events from firing. Hope this helps. This solution did not work but I was stupid enough to not see it. I removed the previous code as it is complete nonsense.

This is a working solution which tracks state using several events:

$(function() {    var oldList, newList, item;    $('.sortable').sortable({        start: function(event, ui) {            item = ui.item;            newList = oldList = ui.item.parent().parent();        },        stop: function(event, ui) {                      alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));        },        change: function(event, ui) {              if(ui.sender) newList = ui.placeholder.parent().parent();        },        connectWith: ".sortable"    }).disableSelection();});

http://jsfiddle.net/39ZvN/9/

I think this is what you wantedhttp://jsfiddle.net/39ZvN/6/

You basically have to separate the sortable commands and give each UL an id.

I am also looking for same... but all above solutions not working as I want. From jquery-ui connected sortable list get serialize/toarray values of two list if item moved from one to another.

Finally I figure it out with single method which is update.

function getSortableOrder(sortableList,ui){  var listItems = {}listItems['sortable'] = sortableList.sortable('toArray');  if(ui.sender!=null)    listItems['sender'] = ui.sender.sortable('toArray');  console.log(listItems);}$('.sortable[sortable="true"]').sortable({                    connectWith:".sortable",                    placeholder: "ui-state-highlight",                    update: function(ev, ui) {                      getSortableOrder($(this),ui);                    }                });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><div id="list-A">    <ul id='sort1' sortable="true" class="sortable">        <li id="1.1">item 1</li>        <li id="1.2">item 2</li>        <li id="1.3">item 3</li>    </ul></div><br /><div id="list-B">    <ul id='sort2' sortable="true" class="sortable">        <li id="2.1">item 4</li>        <li id="2.2">item 5</li>        <li id="2.3">item 6</li>    </ul></div>