Drag and drop anidado

rumech · #1 (**permalink**) 27/01/2012, 04:14

Hola, es mi primer post, así que un saludo para todos!

Estoy haciendo un drag and drop con jQuery, arrastro elementos que me insertan un div dentro de otro div, teniendo así "subdivs", me gustaría que estos subdivs a su vez fueran también elementos a los que pueda insertar otros divs y así tener subsubdivs, pero no logro este comportamiento, solo me deja añadir al primer nivel.

Si alguien me puede echar un cable se lo agradeceré un montón, aunque solo sea darme referencias de que debo estudiar para lograr este comportamiento, he estado buscando pero no encuentro nada que me sirva.

Lo he colgado aquí http://jsfiddle.net/93ZBS/1/ así podéis ver el código con mas facilidad y lo podéis ver funcionando, lo quisiera es poder insertar cuadrados dentro de los cuadrados.

Código HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.5.custom.css" />
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#acordeon').accordion();

                $('#acordeon').find('ul').find('li').draggable({
                    helper : 'clone',
                    appendTo : 'body'
                });

                $('#cart').find('div').sortable({});
                                 
                $('#cart').find('div').droppable({
                    accept: '.dragable',
                    activeClass : 'ui-state-default',
                    hoverClass : 'ui-state-hover',
                    drop : function(event, ui){
                        ui.draggable.find('.drag').remove();
                        $(this).find('.aqui').remove();

                        $(this).append('<div class="sortable one_half"></div>');
                    }
                });
                
                $('.one_half').droppable({
                    accept: '.dragable',
                    activeClass : 'ui-state-default',
                    hoverClass : 'ui-state-hover',
                    drop : function(event, ui){                      
                        $(this).append('<div >Hola!</div>');
                    }
                });

             
            });
        </script>
        <title>Prueba</title>
    </head>
    <body>
        <div id="contenedor">
            <div id="acordeon">
                <h3><a href="#">Arrastrables</a></h3>
                <div>
                    <ul>
                        <li class="dragable">1/2<span class="drag">Arrastrame!</span></li>
                        <li class="dragable">1/4 <span class="drag">Arrastrame!</span></li>
                        <li class="dragable">1/1<span class="drag">Arrastrame!</span></li>
                    </ul>
                </div>

      

            </div>
            <div id="cart">
                <h3>Droppable</h3>
                <div>
                    <div class="aqui">Arrastrar aqui!</div>
                </div>
            </div>
        </div>
    </body>
</html>

Gracias!