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 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();
});