Problema con drag al insertar nuevo elemento

SeaPirates · #1 (**permalink**) 23/04/2012, 03:45

Hola, tengo una clase .item que es la draggable. El problema esta cuando inserto un nuevo item mediante una funcion que tengo programada en javascript

$("#items").append('<div class=".item">Nuevo item</div>');

El problema está en que si inserto un nuevo div draggable no me deja moverlo porque se ha creado posteriormente a cargar la página.

Si yo coloco en el código de la pagina varios div con esa class me deja moverlos y si lo creo con javascript ya no me deja.

Igualmente me pasa con ajax al cargar un box desde un php no deja moverlo.

Naahuel · #2 (**permalink**) 23/04/2012, 05:16

Y sin saber cómo específicamente estás creando el elemento nuevo, no puedo darte una solución concreta. Pero puedo guiarte, con este ejemplo:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    
    <style>
    .draggable {
        width: 150px; 
        height: 150px; 
        padding: 0.5em;
        margin:5px; 
        cursor: pointer;
        background:#EEE;
        border: 1px solid #CCC;
        
    }
    </style>
    
    <script type="text/javascript">
        $(function(){
            //Crer draggables con elementos existentes
            $( ".draggable" ).draggable();
            
            //Crear nuevos elementos y hacerlos draggables
            $('#crear').click(function(){
                //creo el elemento y lo guardo como elemento jQuery
                var $nuevo = $('<div class="draggable" class="ui-widget-content"> <p>Soy nuevo</p> </div>');
                //agregarlo al contenedor, antes del link
                $(this).before($nuevo);
                //hacerlo draggable
                $nuevo.draggable();
            });
        });
    </script>
    
    <title>Test</title>
</head>
<body>
    <div id="demo">
 
        <div class="draggable" class="ui-widget-content">
            <p>Drag me around</p>
        </div>
        <div class="draggable" class="ui-widget-content">
            <p>Drag me around</p>
        </div>
 
        <p><a href="#" id="crear">Crear otro</a></p>
    </div><!-- End demo -->
</body>
</html>

Creo que el código es claro :P

SeaPirates · #3 (**permalink**) 23/04/2012, 09:14

Muchas gracias por tu respuesta Naahuel, aunque ya conseguí solucionando simplemente añadiendo la funcion draggable despues de insertar el elemento, tal y como tu también comentaste. Gracias de todos modos, ahí te va un karma

Naahuel · #4 (**permalink**) 23/04/2012, 09:18

Seguramente el problema está en que no estás esperando que AJAX complete para llamar al método .draggable() sobre los elementos. Eso que has puesto ahí se ejecuta inmediatamente al cargar la página o intentar crear el elemento.