Добавлены новые divs, но они не перетаскиваются?

Question

Я новичок и имею некоторые проблемы с созданием новых divs draggable.

Примером является: http://jsbin.com/iyexi3/

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

Answer 1

Вы сделали какие-то элементы, которые жёстко прописанные в HTML перетаскиваемым, делая это: (». Seleccionable ')

$ перетаскиваемым ({ сопротивления:. Функция (е, щ) { $ (' #status_nombre ') .html ($ (this) .attr (' id ')); $ (' # status_top '). attr (' value ', $ (this) .css (' top ')); $ ('#status_left') атр ('значение', $ (это) .css ('левый'));} , сдерживание:. #layout ' , refreshPositions: истинный , оснастки: истинный });

При добавлении нового элемента вам необходимо вызвать .draggable() для этого.

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

Answer 2

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

Вы можете иметь некоторые удачи с liveQuery

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

Answer 3

, наконец, найти решение afther добавить новый 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 
    }); 
}); 

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