jQuery UI Sortable and two connected lists

Question

I am trying to put together the following with jQuery and Sortable: There are two cases that I need to grab:

• A: move an item within the same l

Answer 1

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/

Answer 2

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>

Answer 3

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

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

Answer 4

What you are trying to do IS a very common use-case. That's why there is this very simple way of accomplishing it:

$('#list-A, #list-B').sortable({ connectWith: '.sortable' });

That's all there is to it.

Here's a live example with explanations on the jQuery UI docs page: http://jqueryui.com/demos/sortable/#connect-lists