Estoy usando jQuery y Ajax para cargar un montón de divs en un div desplazable ("letterHolder"):
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript"> $.ajax({ url: "myphpscript.php", dataType: "json", success: function(result) { $(".letterHolder").html(result['letter_array']); } }); </script> </head> <body> <div class="letterHolder"> </div> </body> </html>El script PHP recupera una lista de nombres de archivos de la base de datos y los carga en letterHolder, por lo que termina luciendo así:
<div class="letterHolder"> <div class="drag_letter">file1</div> <div class="drag_letter">file2</div> <div class="drag_letter">file3</div> etc. </div>Ahora, quiero hacer que esos divs de nombre de archivo se puedan arrastrar, pero esto no funciona:
$(".drag_letter").draggable({ cursor: 'move', revert: true, helper: 'clone' });No funciona si coloco el código arrastrable en el encabezado de la página, ni si coloco el código al final de la página.
Esto funcionaba bien antes de intentar crear los divs usando Ajax.
Supongo que la razón por la que esto funcionaba antes de usar AJAX, pero no funciona con AJAX, es porque está llamando a draggable() con un selector para elementos que aún no están en el DOM. Si llama a draggable() en los elementos después de recibir el resultado de AJAX y agregar los elementos al DOM, debería funcionar.
append() para agregar DOM a un elemento en lugar de html()draggable después de agregar elementos debe enviar nombres de archivo como file1 ... file2 ... como una matriz Json desde el servidor
y reescribe esto:
<script type="text/javascript"> $.ajax({ url: "myphpscript.php", dataType: "json", success: function(result) { $.each(result,function(k,v){ $(".letterHolder").append($('<div></div>').html(v).addClass('drag_letter').draggable({ cursor: 'move', revert: true, helper: 'clone' })); }); } }); </script>