Flor con Drag and Drop

fernandaYO · #1 (**permalink**) 29/02/2012, 16:47

Buenas tardes.

Soy absolutamente nueva en jQuery, pero me gusta aprender, y soy un poco rapida en eso.

Debo hacer que un usuario cree una flor, es decir, que arrastre cada imagen hasta un lugar y vaya creando la flor, no se como hacerlo, quien me pueda ayudar, se lo agradecería demasiado.

Naahuel · #2 (**permalink**) 29/02/2012, 18:29

Me dio algo de curiosidad así que te paso lo que hice en unos 10 minutos :P
http://nahueljose.com.ar/ejemplos/flor-drag-and-drop/

Es súper básico, por supuesto. Utilizo jQuery + jQueryUI.

Revisá la documentación sobre .draggable() y .droppable().

Acá el código con un poco de comentarios. El comportamiento es súper básico pero las herramientas dan para hacer algo mucho mucho mejor. El código no es súper óptimo tampoco pero lo hice más o menos para que no sea tan específico a la flor, sino a una grilla de elementos arrastrables que sólo entran en sus respectivos cuadritos.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<title>Flor Drag &amp; Drop</title>
 
<script>
    $(function(){
        //elementos arrastrables
        $('.arrastrable').draggable({ revert: "invalid" }); //hacer los elementos arrastrables y que vuelvan si no
                                                            //se los coloca en el cuadro correcto
        //objetivos
        $('#lienzo div').each(function(){
            var aceptar = $(this).data('aceptar');          //ver que clase acepta cada obetivo
            if(aceptar){
                $(this).droppable({
                    accept : '.' + aceptar,
                    drop: function( event, ui ) {
                    $( this )
                        .addClass( "ui-state-highlight" );  //resaltar si se ha colocado en el correcto
                    }
                })
            }
        });
    });
</script>
 
<style>
<!-- .arrastrable{
    cursor:move;
    float:left;
}
#imagenes{
    float:right;
    width:500px;
}
#lienzo{
    float:left;
    width:636px;
    height:636px;
    background:#EEE;
    border:1px solid #CCC;
}
#lienzo div{
    width:210px;
    height:210px;
    float:left;
    border:1px solid #CCC;
} -->
</style>
 
</head>
<body>
    <!-- imagenes -->
    <div id="imagenes">
        <img class="arrastrable centro" src="images/centro.png" />
        <img class="arrastrable derecha" src="images/petalo-der.png" />
        <img class="arrastrable inferior" src="images/petalo-inferior.png" />
        <img class="arrastrable izquierda" src="images/petalo-izq.png" />
        <img class="arrastrable superior" src="images/petalo-superior.png" />
    </div>
    
    <!-- lienzo -->
    <div id="lienzo">
        <div></div>
        <div data-aceptar="superior"></div>
        <div></div>
        <div data-aceptar="izquierda"></div>
        <div data-aceptar="centro"></div>
        <div data-aceptar="derecha"></div>
        <div></div>
        <div data-aceptar="inferior"></div>
        <div></div>
    </div>
</body>
</html>