jquery ui可排序传播动态创建排序 [英] jquery ui sortable propagation dynamically created sortables

问题描述

我想要有一个功能，每当我从空白空间中排序图像时，都会创建一个新的可排序。
如果我可以存储两个图像，可以拖动它们，并且真正创建新的可排序（灰色框）。
现在我希望能够将图像从新创建的灰色框中拖出，这样，如果我放在一个空的空间上再创建一个新的灰色框。这不行。如何将我的功能传播给动态创建uls？刷新似乎不工作或我的错误在哪里？

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?

这是我的jsfiddle： http://jsfiddle.net/Gy74c/6/

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

推荐答案

我已经把它'排序'出来了）..至少如果我明白你正确的。

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

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

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

我做了一个var选项，其中包含可排序的所有选项。现在在停止事件我反弹了所有的选项再次..这只是没有做的魔法..你使用ui.position.left和.top绝对位置一个新创建的ul ..你必须使用ui.offset.left和top来获取元素的实际左边和顶部。没有这个图像将被放置在屏幕外面，第二次移动它，并将它全部。 ;）

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. ;)

提示：由于var x已经是一个声明的jQuery对象，所以后来不必使用$（x）只是x.jQueryMethod会做的很好;）

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 ;)

编辑：哎呀，我忘了删除console.log（）的

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

这篇关于jquery ui可排序传播动态创建排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！