Trying to customize east to west drag and drop of elements

[Mitch Moccia]

Hey man...
I am trying to customize the drag and drop feature and am running into a few issues.

Basically I need the left side items to be drag and droppable to the right side items.

I analyzed this http://ui-dev.jquery.com/demos/droppable/#revert but couldn't get it to work from left to right (i.e. I did get it to work on the left side only).

Right now, when you drag an item from the left (i.e. ul#named-tag... see the code below), and try to drop it on the right, it just gets added as a new tag. The right and left are both sortable and I connectWith works only with like items right?

In "connectWith" in the code below, it just has 'ul#item-list'. Do you know how I might be able to target each chat item?
It looks like the data in the chat side on the right is being stored as 'in memory data', so I am not able to view source and readily see li tag id's.

<script type="text/javascript"> $(document).ready(function(){ $("ul#people-tag").sortable({connectWith: 'ul#item-list', helper: 'clone', start: function(event, ui){ $("ul#people-tag").find('li:hidden').show(); } }); $("ul#named-tag").sortable({connectWith: 'ul#item-list', helper: 'clone', start: function(event, ui){ $("ul#named-tag").find('li:hidden').show(); } }); $("ul#item-list").sortable({receive: function(event, ui){ txt = 'Tag : ' + ui.item.text().trim(); if (ui.item.hasClass('people-tag')){ $("ul#people-tag").append(ui.item) }else{ $("ul#named-tag").append(ui.item) alert("hello"); } $('#text-area').val(txt) jQuery.ajax({ data: 'id='+ui.item.attr('tag-id')+'&session_id='+ui.item.attr('session'), dataType: 'script', type: 'post', url: "/ria/create_tag_for_session" }); $('#share-data').submit() } }); }); </script>

Thanks for any help or direction on this.