Jquery-ui Arrastrable y dinámico Jquery-ui arrastrable?

Este es mi código tomado de http://jqueryui.com/demos/draggable/Jquery-ui Arrastrable y dinámico Jquery-ui arrastrable?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> 
    <script src="../../jquery-1.6.2.js"></script> 
    <script src="../../ui/jquery.ui.core.js"></script> 
    <script src="../../ui/jquery.ui.widget.js"></script> 
    <script src="../../ui/jquery.ui.mouse.js"></script> 
    <script src="../../ui/jquery.ui.draggable.js"></script> 
    <link rel="stylesheet" href="../demos.css"> 
    <style> 
    .draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 
    <script> 
    $(function() { 
    $(".draggable").draggable(); 
    $('.content').click(function(){ 
    var htmlData='<div class="draggable ui-widget-content  ui-draggable"><p>Drag me around</p></div>'; 
    $('.demo').append(htmlData); 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div class="demo"> 
    <div class="draggable ui-widget-content"> 
    <p>Drag me around</p> 
    </div> 
    <div class="content">Test </div> 
    </div><!-- End demo --> 
</body> 
</html>

Iam haciendo componente se puede arrastrar dinámicamente como se puede ver en función iam usando agregar. Pero el objeto drggable recién generado no se está arrastrando aunque he dado las clases generadas por jquery-ui.

Fuente

2011-10-05 Human Love

intente llamar al $(".draggable").draggable(); una vez que se haya agregado el elemento creado dinámicamente.

$(function() { 
    $(".draggable").draggable(); 
    $('.content').click(function(){ 
     var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; 
     $('.demo').append(htmlData); 
     $(".draggable").draggable(); 
    }); 
});

Working Demo

Fuente

2011-10-05 11:37:48

, gracias después de llamar de nuevo resuelto arrastrable el problema muchas gracias a ti. Muchas gracias. –

No olvide incluir su código para referencia futura. – Jeffrey

esto funciona .. +1 –

<script> 
    $(function() { 
     $(".draggable").draggable(); 
     $(".content").click(function(){ 
      var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; 
      $(".demo").append(htmlData); 
     }); 
    }); 
</script>

Sólo se necesita una necesidad de cambio de posición

<script> 
    $(function() {  
     $(".content").click(function(){ 
      var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; 
      $(".demo").append(htmlData); 
      $(".draggable").draggable(); //bring it here so that for the newly inserted/created dom elements, jquery draggable can be initialized. 
     }); 
    }); 
</script>

Fuente

2012-01-15 17:49:32

hecho voy a decir por razones de rendimiento, en lugar de usar:

$('.draggable:not(.ui-draggable)').draggable();

Esto evitará intentar reinicializar elementos ya arrastrables utilizando la clase de UI jQuery incorporada. Además, si su código en el camino modifica las propiedades de un draggable individual que puede no coincidir con las propiedades de un nuevo arrastrable, podría terminar con un reinicio.

Nada de malo en ser específico con jQuery.

ACTUALIZACIÓN

no especificó a qué instancia de usar esto. Basado en la edición de Ricardo:

$(function() { 
    $(".draggable").draggable(); 
    $('.content').click(function(){ 
     var htmlData='<div class="draggable ui-widget-content"><p>Drag me around</p></div>'; 
     $('.demo').append(htmlData); 
     $('.draggable:not(.ui-draggable)').draggable(); //Here 
     }); 
    });

También estoy viendo que se estaba agregando manualmente la clase ui-draggable. No necesitas hacer eso. De hecho, hace que lo que dije no funcione.

Fuente

2012-01-18 01:11:28

recomendaría hacerlo así porque si se desea pasar un objeto de configuración de la función que pueden arrastrarse, usted no tendrá que repetirlo en dos lugares diferentes:

<script> 
    $(function() { 
     setDraggable(); 

     $('.content').click(function(){ 
     var htmlData='<div class="draggable ui-widget-content  ui-draggable"><p>Drag me around</p></div>'; 
     $('.demo').append(htmlData); 

     setDraggable(); 
    }); 
    }); 

    function setDraggable(){ 
     $(".draggable").draggable(); 
    } 
</script>

Fuente

2016-02-14 12:23:06 user3791372

Jquery-ui Arrastrable y dinámico Jquery-ui arrastrable?

Respuesta

Cuestiones relacionadas