Appended new divs, but they're not draggable?

Question

I'm a newbie and have some problems with making new divs draggable.

The example is: http://jsbin.com/iyexi3/

The problem is when I show the dialog for the name, I create some divs, but they aren't draggable.

Answer 1

You've made some elements that are hardcoded in the HTML draggable by doing this:

$('.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')); } ,containment: '#layout' ,refreshPositions: true ,snap: true });

When you add a new element you need to call .draggable() for that one too.

One way to do it would be to put that selector/draggable code into a function and call it after you've added a new element.

Answer 2

The issue is that when you append a new element to the DOM, it doesn't inherit the event handlers of the existing draggable elements.

You may have some luck with liveQuery

This will allow you to create live events on all current and future elements matching a selector. It's similar to the built-in live() method. I haven't used it but it should work with draggable.

Answer 3

finally find the solution is afther append the new div...

$('#nv_objeto').click(function(){
var nbr =prompt("Por favor escriba el nombre del Objeto:",""); $("#layout").append(""); $('#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 }); });

thanks for the help.