How to create a new .sortable list with the element dragged from another sortable list

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

   <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

I am using above jquery . My question is .....

) On a Button click i am adding a value to sortable connected list . (work fine)

2) After item add to sortable list i want to drag this item and move to connected list. (work fine).

here is the problem :

Drop down has 10 or more items . User is allow to click on btn and add all the item to 1st sortable list one by one( note: item will add to only 1st sortable list). From 1st sortable list user can drag item any where on screen and drop. when user drop item , it should create a new "ul" with id and add "li"(dragged item by user) to this.

So if i have 10 or more items in drop down ,its mean user can create 10 or more ul for each item. And at the end i need length of all the lists.

Any help will be fine.


NOTE: i am able to make two sortable list and move items inbetween but i need some thing like OOPs, so i don't need to hard code all the "ul" . "ul" should create on fly when i am dragging item , and i should be able to drop "li" into newly created "ul".

Thanks guys in advance. If you need any more detail please let me know. I been stuck with this about 2 weeks.

Tags: jQuery, jQuery-UI