jquery Multiple Sortables/droppable Revert Issue

Question

The Scenario: I have a single page that has three sortables on it (arranged horizontally relative to one another), all connected via the "connectWith" option. Between the three of them, I can sort, drag and drop...no problems. I added a droppable on the bottom left of the page so that the user can drop an item from any of the three lists onto it, some action is performed (in this case, a search based on the dropped item), and the dropped item should then revert back to its place of origin.

LIST A LIST B LIST C

[droppable here]

The Issue: If I drag an item from list C to the droppable, and I have crossed over any of the other div containers for list A or B, the item reverts back to the last list that was crossed over instead of its list of origin! My list divs are of a fixed height and scrollable, so although the scrollable area ends above the droppable, the actual height extends down to it.

Any ideas??? Somehow I need to make it so that an item does not become part of a list until the user actually lets it go on top of the target list. it is currently behaving such that an item becomes part of the list as soon as it crosses over the list's border.

Thanks so much in advance for any input/assistance you can give me. I've run out of things to try, and that's never a good feeling.

screenshot: www.dougboude.com/images/jqueryissue.gif

html and js:

<table width="50%" border="1">
    <tr>
     <td valign="top">
      <div class="wrapper connectedSortable" id="tlwrapper" style="height:425px;width=350px;overflow-y:scroll;">
       <div class="p"><img class="grabme" src="../images/grippy.gif" style="cursor:move;"/>John Smith</div>
      </div>
     </td>
     <td valign="top">
      <div class="wrapper connectedSortable" id="tmwrapper" style="height:425px;width=350px;overflow-y:scroll;">
       <div class="p"><img class="grabme" src="../images/grippy.gif" style="cursor:move;"/>Lucy Lu</div>
       <div class="p"><img class="grabme" src="../images/grippy.gif" style="cursor:move;"/>Johny McJohnerson <img src="../images/icon_person_un.gif" />&nbsp;<a href="#"  ><img style="border:none;" src="../images/icon_information.gif" /></a></div>
      </div>
     </td>
     <td valign="top">
      <div class="wrapper connectedSortable" id="apwrapper" style="height:425px;width=350px;overflow-y:scroll;">
       <div class="p"><img class="grabme" src="../images/grippy.gif" style="cursor:move;"/>Johny Cake</div>
       <div class="p"><img class="grabme" src="../images/grippy.gif" style="cursor:move;"/>Tim Barnhill</div>
      </div>
     </td>
    </tr>
    <tr>
     <td>
      Adjuster:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="adjtarget" class="connectedSortable"><img src="../images/target.gif" align="absmiddle" /></div> <---- <span style="font-size:11px;color:black;font-style:italic;">(drop an adjuster here...)</span>
     </td>
     <td> </td>
     <td> </td>
    </tr>
</table>
<script>
    $(document).ready(function(){
     $("#tmwrapper, #apwrapper, #tlwrapper").sortable({
      tolerance: 'fit',
      handle: '.grabme',
      connectWith: $('.connectedSortable'),
      items: '.p',
      helper: 'clone',
      revert: 'valid',
      receive: function(ev,ui){alert('receiving!');
       //var droppedPerson = ui.item.html();
       //change class to match target area
       //append to target
      },
      update: function(ev,ui){
       alert('updating!');
      }
     }).disableSelection();

     $("#adjtarget").droppable({
      activeClass:'.targethighlight',
      drop:function(ev,ui){
       alert('dropped');
      }
      });
    });
</script>

Answer 1

You could try the following in the dropped event. That will revert the sortable to its original position regardless of what it was dragged over.

 ui.draggable.closest('div.wrapper').sortable('cancel');