jQuery UI que se puede arrastrar no funciona en el elemento DOM recientemente creado

Question

Tengo un elemento DOM que se puede arrastrar usando jQuery UI. Todos funcionan bien, pero cuando creo algún elemento usando jQuery, no se pueden arrastrar. es decir

$('div.draggable').draggable(); //Existing element , it works :) 
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

Gracias de antemano !!!

estoy tratando Este:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('body').append('<p class="draggable">Newly Created Paragraph</p>'); 
     $('p.draggable').draggable(); **//This is not working** 
    }); 
</script> 

Sin embargo alguna manera esto está trabajando

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('body').append('<p class="draggable">Newly Created Paragraph</p>') 
       .find('p.draggable').draggable(); **This is working** 

    }); 
</script> 

Answer 1

es necesario llamar a arrastrable() después de que el elemento recién creado se inserta en el DOM.

La razón es que la primera línea de código solo coincide con los elementos existentes. Los elementos recién creados no se seleccionan en esa primera línea.

Answer 2

En realidad parece que hay un problema con el arrastre. Cuando agrega algo de htmlTag y luego trata de encontrarlo y hacerlo arrastrable, no lo reconoce. intente hacer un nuevo elemento usando createElement y luego añádalo. Espero que funcione

var newEle = document.createElement('p'); 
$(newEle).attr("class","draggable").draggable(); 
$('body').append($(newEle)); 

o

var newEle = document.createElement('p'); 
$(newEle).attr("class","draggable"); 
$('body').append($(newEle)); 
$('p.draggable').draggable(); 

Answer 3

que tenía este problema, pero después de leer esto que podría resolverlo. así que hay que llamar al método nuevo arrastrable() después de la construcción de su nuevo elemento, este es mi código:

$(".in-browser").each(function(){ 
     $(this).dblclick(function(){ 
      var browseIn = $(this).data("href"); 
      var browserHTML = '<div class="browser draggable">\ 
     <ul class="browser-buttons">\ 
      <li>_ \ 
      <li># \ 
      <li>x \ 
     </ul>\ 
     <div class="browser-win-container">\ 
     <div class="addressbar"></div>\ 
     <iframe class="opening-window" src="'+browseIn+'"></iframe>\ 
    </div>\ 
    </div>'; 
      $("body").append(browserHTML); 
      $(".draggable").draggable(); //look at here 
     }); 
    }); 

Answer 4

Sé que ha pasado un tiempo, pero este problema hace poco me molestó demasiado. Como mencionó otra persona, debe volver a ejecutar .draggable() en el elemento recién creado, pero eso no funciona si definió ciertas opciones en su .draggable(). También lo que no funcionó fue poner el $().draggable() en una función y luego llamar a la función después de crear un nuevo elemento (este truco sí funciona con el restablecimiento de los elementos que se pueden eliminar: vaya figura).

De todos modos, cuento corto -> Poner la configuración $().draggable() en una función y luego llamar a la función después de crear el nuevo elemento DID WORK, pero tuve que sacarlo de la función document ready ..... después de que deshabilité ese , funcionó.

Puede llamar a esa función tantas veces y sigue trabajando después de cada elemento creado. Parece que si está en la declaración document.ready, entonces es una oferta de 1 disparo ...

Espero que ayude.

Answer 5

Debe llamar arrastrable función de cada() se llama a una acción de evento:

$('body').on('click', '.add-new-table', function() { 
$(".canvas").prepend('<div class="ui-widget-content draggable"><p>Drag me</p></div>'); 
$(function(){ 
    $(".draggable").draggable({ 
    containment: "parent" 
    }); 
}); 
}); 

Answer 6

Usted tiene que solicitar que pueden arrastrarse en la instancia del objeto recién creado, código reescrito:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var newElement = '<p class="draggable">Newly Created Paragraph</p>'; 
    $('body').append(newElement); 
    newElement.draggable(); **//This is working** 
}); 

Debería funcionar ahora.