jquery ui sortable propagation dynamically created sortables

Question

I want to have a feature that every time I drag an image from sortable on empty space a new sortable is created. If I store two images in a sortable, than I can drag them and new sortables are really created(gray boxes). Now I would desire to be able to drag an image out of the newly created gray box, so that again a new gray box would be created if I would drop on an empty space. This does not work. How can I propagate my function for uls to dynamically created uls? refresh does not seem to work or where is my mistake?

here is my jsfiddle: http://jsfiddle.net/Gy74c/6/

$( "ul" ).sortable({opacity:0.4, connectWith: 'ul',tolerance:'pointer',cursor:'move', dropOnfull: true, stop :function (event,ui){                

                                       var positionLeft=ui.position.left;
                                       var positionTop=ui.position.top;
                                       var overSortable=elementBeingHoveredOver(event.pageX, event.pageY);

                                       if (!overSortable){                                          
                                       var x=$ ("<ul id='sortable10' class='drop'></ul>");
                                       $(x).css('position','absolute');
                                       $(x).css('left',positionLeft);
                                       $(x).css('top',positionTop); 
                                       $(x).css('height','70px');                                      
                                       ui.item.appendTo(x);
                                       $(x).sortable({connectWith: 'ul'})
                                       x.appendTo('#images');
                                       $('#images').append(x);
                                       $( "ul" ).sortable({ connectWith: 'ul'});
                                       $("ul").sortable('refresh');
                                       }        

    currentID=$(this).attr('id');        
    var liNumber=document.getElementById(currentID).getElementsByTagName("li").length; 
    if (liNumber==0 &&!currentID=="sortable1"){document.getElementById(currentID).style.visibility= "hidden"}
                        }//stop-function

                     });//sortable-block

Answer 1

I've got it 'sorted' out ;).. at least if i understand you correctly.

http://jsfiddle.net/Gy74c/10/

$( "ul" ).sortable(options);

I've made a var options which holds all the options for the sortable.. Now in the stop event i rebound the sortable with all the options again.. This only did not do the magic.. You made use of the ui.position.left and .top to absolute position a newly created ul.. You had to make use of the ui.offset.left and top to get the actual left and top of the element.. Without this the image would be placed outside the screen the second time you move it, and f'd it all up. ;)

Hint: As the var x already is a jQuery object on declaration, you later don't have to use $(x) just x.jQueryMethod will do just fine ;)

Edit: Oops i forgot to remove the console.log()'s