Nouvelles divs ajoutées, mais elles ne peuvent pas être déplacées?

Question

Je suis un novice et j'ai quelques problèmes à faire draggable de nouvelles divs.

L'exemple est: http://jsbin.com/iyexi3/

Le problème est quand je montre la boîte de dialogue pour le nom, je crée des divs, mais ils ne sont pas draggable.

Answer 1

Vous avez fait quelques éléments qui sont définitivement dans le code HTML draggable en faisant ceci: (». Seleccionable ')

$ draggable ({ glisser. Function (e, ui) { $ (' #status_nombre '). html ($ (this) .attr (' id ')); $ (' # status_top '). attr (' valeur ', $ (this) .css (' top ')); $ ('#status_left') attr ('value', $ (this) Css ('gauche'));} , confinement:. '#layout' , refreshPositions: true , enclenchent: true} );

Lorsque vous ajoutez un nouvel élément, vous devez également appeler .draggable() pour celui-ci. Une manière de le faire serait de mettre ce code sélecteur/draggable dans une fonction et de l'appeler après avoir ajouté un nouvel élément.

Answer 2

Le problème est que lorsque vous ajoutez un nouvel élément au DOM, il n'hérite pas des gestionnaires d'événements des éléments draggables existants.

Vous avez sans doute un peu de chance avec liveQuery

Cela vous permettra de créer des événements en direct sur tous les éléments actuels et futurs correspondant à un sélecteur. C'est similaire à la méthode intégrée live(). Je ne l'ai pas utilisé mais il devrait fonctionner avec draggable.

Answer 3

trouver enfin la solution est afther y ajoute la nouvelle 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 
    }); 
}); 

merci pour l'aide.