Добавлены новые div, но они не перетаскиваются? - PullRequest
2 голосов
/ 03 марта 2010

Я новичок, и у меня есть некоторые проблемы с перетаскиванием новых div'ов.

Пример: http://jsbin.com/iyexi3/

Проблема в том, что когда я показываю диалог с именем, я создаю некоторые элементы div, но они не перетаскиваются.

Ответы [ 3 ]

0 голосов
/ 03 марта 2010

Проблема в том, что при добавлении нового элемента в DOM он не наследует обработчики событий существующих перетаскиваемых элементов.

Возможно, вам повезет с liveQuery

Это позволит вам создавать живые события для всех текущих и будущих элементов, соответствующих селектору. Это похоже на встроенный метод live (). Я не использовал его, но он должен работать с Draggable.

0 голосов
/ 03 марта 2010

наконец-то нашёл решение, добавив новый div ...

$('#nv_objeto').click(function(){   
    var nbr =prompt("Por favor escriba el nombre del Objeto:","");
    $("#layout").append("<div id='"+c_nbr(nbr)+"' class='seleccionable' style='top: 300px; left: 400px; width : 40px; height : 40px; background-color : black;  position :absolute;'></div>");
    $('#layout > div:last').blur().draggable({
                drag: function(e, ui) {
                    $('#status_nombre').html($(this).attr('id'));
                    $('#status_top').attr('value',$(this).css('top'));
                    $('#status_left').attr('value',$(this).css('left'));
        }
        ,containment: '#layout'
        ,refreshPositions: true
        ,snap: true
    });
});

спасибо за помощь.

0 голосов
/ 03 марта 2010

Вы сделали некоторые элементы, жестко закодированные в HTML, перетаскиваемыми, выполнив это:

$ ('. Seleccionable'). Draggable ({drag: function (e, ui) {$ ('#status_nombre '). html ($ (this) .attr (' id ')); $ (' # status_top '). attr (' value ', $ (this) .css (' top ')); $ (' #status_left '). attr (' value ', $ (this) .css (' left '));}, включение:' #layout ', refreshPositions: true, snap: true});

Когда выдобавьте новый элемент, который вам нужно вызвать .draggable () для этого тоже.

Один из способов сделать это - поместить этот селекторный / перетаскиваемый код в функцию и вызывать его после добавления нового элемента.

...