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 list
• B: move an item from one list to another

Case B is solved when only using the receive event. But if I bind both receive and stop they also get fired both when moving an item from one list to another. This makes it impossible for me to capture case A because I have no way of finding out if the item was moved from another list or within the same. Hope that makes sense.

This is kind of weird because I would think of my use case as being the most used one.

I am craving for ideas. If you want to try it out, see http://jsfiddle.net/39ZvN/5/.

HTML:

<div id="list-A">
  <ul class="sortable">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
</div>
<br />
<div id="list-B">
  <ul class="sortable">
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
  </ul>
</div>

JS:

$(function() {
  $('.sortable').sortable({
    stop: function(event, ui) {
      // Wird auch aufgerufen wenn von Liste X nach Liste Y gezogen wird
      if(!ui.sender) alert("sender null");
      else alert("sender not null");
    },
    receive: function(event, ui) {
      // Funktioniert top, damit kann ich Fall B abfangen
      alert("Moved from another list");
    },
    connectWith: ".sortable"
  }).disableSelection();
});

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

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>