jquery ui可排序传播动态创建可排序

Question

我想要一个功能，每次我从可排序的空白区域拖动图像时，都会创建一个新的可排序。如果我将两个图像存储在可排序中，那么我可以拖动它们，并且真正创建新的可排序(灰色框)。现在我希望能够将图像从新创建的灰色框中拖出，这样如果我将其放在空白处，就会再次创建一个新的灰色框。这是行不通的。如何将 uls 的函数传播到动态创建的 uls？刷新似乎不起作用或者我的错误在哪里？

这是我的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

我已经把它“整理”出来了;)..至少如果我理解正确的话。

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

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

我制作了一个 var options，其中包含可排序的所有选项。现在在停止事件中，我再次使用所有选项反弹可排序。这只是没有发挥作用。您使用了ui.position.left 和 .top 到新创建的 ul 的绝对位置。您必须使用 ui.offset.left 和 top 来获取元素的实际左侧和顶部。如果没有这个，图像将被放置当你第二次移动它时，它就会出现在屏幕之外，然后就把它全部搞定了。 ;)

提示:由于 var x 在声明时已经是一个 jQuery 对象，因此您稍后不必使用 $(x)，只需 x.jQueryMethod 就可以了;)

编辑:糟糕，我忘记删除 console.log() 的