jquery - Jquery UI の並べ替え可能な問題: 動的に作成された並べ替え可能なオブジェクトにドロップした後に画像が表示されない (両方の ul に同じ親 div がある)

Question

次の問題があります。

1 つの画像 (緑色のボックス) を持つ並べ替え可能な ul が 1 つあります。この画像をどこにでもドラッグして、この場所に新しい並べ替え可能な ul (灰色のボックス) を作成できるようにしたいと考えています。

この部分は完璧に機能します。

また、画像を灰色のボックスから緑色のボックスにドラッグできるようにしたいと考えています。また、一部を除いて正常に動作します。ドラッグ中は画像が見えません。ドラッグ中に画像を表示するにはどうすればよいですか?

私はチェックしました：両方のULは同じ親を持っているようです、私は両方のULのparentIdsを警告し、それは同じです。どちらの場合でもあります #images

この問題を解決するにはどうすればよいですか?

そのためのjsfiddleを作成しました：リンク

$(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