jQueryUI Drag&Drop lists - Both ways?

I've been looking through the documentation of jQueryUI's Draggable and Droppable. I've found various ways to make a list drag and droppable to another list, but not BOTH ways?

My scenario is, that I have 2 lists:

<div id='attached'>
  <ul>
    <li id='12'>An item<开发者_如何学JAVA/li>
    <li id='48'>An item</li>
    <li id='183'>An item</li>
  </ul>
</div>

<div id='non-attached'>
  <ul>
    <li id='36'>An item</li>
    <li id='873'>An item</li>
    <li id='1639'>An item</li>
  </ul>
</div>

If one drops an item from list 1 to list 2 an AJAX url should be executed - like

hello.asp?action=add&id=48

And if one drops an item from list 2 to list 1 another AJAX url should be executed - like

hello.asp?action=remove&id=48

Is this possible in any way? :) It would make the interface of my script a LOT easier :)

Note: I am already familiar with jQueryUI, but both droppable and draggable are new to me. Until now at least :)

EDITED:

<ul id='attached'>
  <li id='itemID_12'>An item</li>
  <li id='itemID_48'>An item</li>
  <li id='itemID_183'>An item</li>
</ul>

<ul id='non-attached'>
  <li id='itemID_36'>An item</li>
  <li id='itemID_873'>An item</li>
  <li id='itemID_1639'>An item</li>
</ul>

$(function() {
  $('#attached').sortable({ dropOnEmpty: true, items: 'li:not(.ui-state-disabled)', cursor: 'pointer', update: function(event, ui) { }, connectWith: '#non-attached' }).disableSelection();
  $('#non-attached').sortable({ dropOnEmpty: true, items: 'li:not(.ui-state-disabled)', cursor: 'pointer', update: function(event, ui) { }, connectWith: '#attached' }).disableSelection();
};

Now i only need to get the right serialized data through the AJAX via update: {} ?

EDITED:

GOT IT!

var order = $('#attached').sortable('serialize',{key:'string'});
$.ajax({
  type: 'POST', 
  cache: false, 
  contentType: 'application/x-www-form-urlencoded; charset=UTF-8', 
  url: 'functions.asp?a=helloworld', 
  data: order 
});

now when i request.form("string") in the functions.asp i get a series of id's like "25, 28, 31, 94, 95".. :)

---

I've done something similar though using sortables (order was important in my app), sortables are based on draggables. Currently our network is having problems getting to jqueryui.com so I can't give you exactly what you want but I'll give you something based on mine which should give you a good start.

$(function() {
    $("#attached").sortable({
        update: function(event, ui) {
            FunctionToCheckAddtionAndCallAjax();
        },
        connectWith: '#non-attached'
    });

    $("#non-attached").sortable({
        update: function(event, ui) {
            FunctionToCheckRemovalAndCallAjax();
        },
        connectWith: '#attached'
    });
});

As this is based on sortables rather than drag and droppables I've pushed the checking and ajax to a function call rather than an anonymous function, these functions should check to see if the update was an addition/removal or just a reorder and conditionally make your ajax calls. There may be event handlers for when items are added/removed but without access to the site I can't check the documentation.