Jquery UI sortable issue: image invisible after drop on the dynamically created sortable (both uls have same parent div)

Question

I have the following problem:

I have got one sortable ul with one image (the green box). I want to be able to drag this image anywhere and create on this spot a new sortable ul(the grey box).

This part works perfectly.

Now I also want to be able to drag the image back from the gray box to the green one. It also works fine except one part: during the drag the image is invisible. How could I make the image visible during the drag?

I have checked: both uls seem to have same parent, I alert parentIds of both uls and it is the same . It is in both cases #images

How could I fix this problem?

I have created a jsfiddle for it: a link

$(document).ready (function() {   

                                  $( "ul" ).sortable({opacity:0.4, connectWith: 'ul', dropOnfull: true, stop: function (event,ui){
                                       var positionLeft=ui.position.left;
                                       var positionTop=ui.position.top;

                                       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'});
                                       $('#images').append(x);


                                       $( "ul" ).sortable({ connectWith: 'ul'});
                                         alert("ParentId of the gray box is "+$('ul#sortable10 ').parent().attr('id'));
                                         alert("ParentId of the green box is "+$('ul#sortable1 ').parent().attr('id'));
                                       } // stop-function
                                   });//sortable-options

                              })//main-function

Answer 1

My guesses are that the ul is 'hiding' the element.. as you drag it around you can still see the image until the border of the ul..

I think you need to use divs or spans and make use of the draggable of jQuery ui..