jquery ui сортируемое распространение динамически создаваемых сортируемых

Я хочу иметь функцию, при которой каждый раз, когда я перетаскиваю изображение из сортируемого на пустое место, создается новое сортируемое. Если я храню два изображения в сортируемом, я могу перетаскивать их, и новые сортируемые объекты действительно создаются (серые прямоугольники). Теперь я хотел бы иметь возможность перетаскивать изображение из вновь созданного серого поля, чтобы снова было создано новое серое поле, если я упаду на пустое место. Это не работает. Как я могу распространить свою функцию для 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

person user2514539    schedule 14.07.2013    source источник


Ответы (1)


Я "разобрался" ;).. по крайней мере, если я вас правильно понял.

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

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

Я сделал параметры var, которые содержат все параметры для сортировки. Теперь в событии остановки я снова переустанавливаю сортировку со всеми параметрами. Это только не творит магию. Вы использовали ui.position .left и .top для абсолютного положения вновь созданного ul.. Вам пришлось использовать ui.offset.left и top, чтобы получить фактическое левое и верхнее положение элемента.. Без этого изображение было бы размещено за пределами экрана во второй раз, когда вы переместите его, и f'd все это. ;)

Подсказка: поскольку var x уже является объектом jQuery при объявлении, позже вам не нужно использовать $(x), просто x.jQueryMethod вполне подойдет ;)

Редактировать: Ой, я забыл удалить console.log()

person Mark Rijsmus    schedule 14.07.2013
comment
Мне жаль ф. поднимите свои отступы.. но я думаю, что это не будет проблемой - person Mark Rijsmus; 14.07.2013
comment
Спасибо, я должен вам один, и извините за мой плохой английский, он немного ржавый :) Последние 3 часа потратил на то, чтобы решить эту проблему. - person user2514539; 14.07.2013
comment
Нет, это самая маленькая проблема, я очень рад, что это работает - person user2514539; 14.07.2013
comment
Еще раз, я рад, что смог помочь ;).. Ваш английский в порядке.. Надеюсь, теперь вы поняли решение и в чем была проблема? - person Mark Rijsmus; 14.07.2013