Draggable, droppable.

Carloosolrac · #1 (**permalink**) 06/08/2012, 14:55

Holas!

Tengo un problema con diseñar algo utilizando el draggable() y droppable() de JQueryUI.

Lo que ocurre es que tengo 2 DIVs:

En el "ejemplo1" tengo 3 divs mas "box1","box2","box3" (draggable)
En el "ejemplo2" (droppable) tengo 1 div, "boxIntacto"

Cómo puedo hacer, que cuando mueva box1,2,3 no se pongan ENCIMA (al lado, en la punta o donde sea) de "boxIntacto"?

Gracias a todos!

Carloosolrac · #2 (**permalink**) 07/08/2012, 12:22

Aquí está el código que tengo, pero aún no logro nada...

No puedo hacer que NINGUN elemento quede sobre el Div#i10

Alguna idea?.... U otro método para lograr esto?

Gracias!

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/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">
 
            $(document).ready(function(){
                $('#i01').draggable({
                    revert: "invalid",
                    helper: "clone",
                    containment: '#box',
                    grid: [10,10],
                    appendTo: "#box",
                    start: function(){
                        $(this).css("border","2px solid red");
                    }
                });
                $('#box').droppable({
                    tolerance: 'touch',
                    drop: function(event, ui){
                        $(ui.draggable).css("border","1px dashed black");
                        var idiv = ui.draggable.attr("id");
                        var x_left = ui.position.left;
                        var x_top =  ui.position.top;
                        createObjet_(idiv,x_left,x_top);                    
                    }
                });
                function createObjet_(div,x_left,x_top){
                    $('#box').append('<div id="'+div+'" class="object" style="position: absolute; left: '+x_left+'px; top: '+x_top+'px;"></div>');
                }
            });
        </script>
    </head>
    <style type="text/css">
        #edi{
            float: left;
            width: 100px;
            height: 600px;
            margin-right: 20px ;
            border: 1px solid black;
        }
        #box {
            float: left;
            width: 800px;
            height: 600px;
            border: 1px solid black;
        }
        .object {
            width: 90px;
            height: 90px;
            border: 1px dashed black;
        }
        #i01 {
            background: rgba(150,160,170,0.7);
        }
        #i10 {
            background: rgba(250,220,114,0.7);
            position: relative;
            left: 100px;
            top: 67px;
        }
    </style>
    <body>
        <div id="cont">
            <div id="edi">
                <div id="i01" class="object"></div>
            </div>
            <div id="box">
                <div id="i10" class="object"></div>
            </div>
        </div>
    </body>
</html>

KsrZ · #3 (**permalink**) 09/09/2012, 23:37

obtén el contenido de un DIV en texto plano, pegalo en tu otro DIV, y borralo del DIV viejo,

poco tarde, pero quizá aun tengas esa duda