Tema: Flor con Drag and Drop
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 29/02/2012, 18:29
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: Flor con Drag and Drop
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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  6. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  7. <title>Flor Drag &amp; Drop</title>
  8.  
  9. <script>
  10.     $(function(){
  11.         //elementos arrastrables
  12.         $('.arrastrable').draggable({ revert: "invalid" }); //hacer los elementos arrastrables y que vuelvan si no
  13.                                                             //se los coloca en el cuadro correcto
  14.         //objetivos
  15.         $('#lienzo div').each(function(){
  16.             var aceptar = $(this).data('aceptar');          //ver que clase acepta cada obetivo
  17.             if(aceptar){
  18.                 $(this).droppable({
  19.                     accept : '.' + aceptar,
  20.                     drop: function( event, ui ) {
  21.                     $( this )
  22.                         .addClass( "ui-state-highlight" );  //resaltar si se ha colocado en el correcto
  23.                     }
  24.                 })
  25.             }
  26.         });
  27.     });
  28. </script>
  29.  
  30. <style>
  31. <!-- .arrastrable{
  32.     cursor:move;
  33.     float:left;
  34. }
  35. #imagenes{
  36.     float:right;
  37.     width:500px;
  38. }
  39. #lienzo{
  40.     float:left;
  41.     width:636px;
  42.     height:636px;
  43.     background:#EEE;
  44.     border:1px solid #CCC;
  45. }
  46. #lienzo div{
  47.     width:210px;
  48.     height:210px;
  49.     float:left;
  50.     border:1px solid #CCC;
  51. } -->
  52. </style>
  53.  
  54. </head>
  55. <body>
  56.     <!-- imagenes -->
  57.     <div id="imagenes">
  58.         <img class="arrastrable centro" src="images/centro.png" />
  59.         <img class="arrastrable derecha" src="images/petalo-der.png" />
  60.         <img class="arrastrable inferior" src="images/petalo-inferior.png" />
  61.         <img class="arrastrable izquierda" src="images/petalo-izq.png" />
  62.         <img class="arrastrable superior" src="images/petalo-superior.png" />
  63.     </div>
  64.     
  65.     <!-- lienzo -->
  66.     <div id="lienzo">
  67.         <div></div>
  68.         <div data-aceptar="superior"></div>
  69.         <div></div>
  70.         <div data-aceptar="izquierda"></div>
  71.         <div data-aceptar="centro"></div>
  72.         <div data-aceptar="derecha"></div>
  73.         <div></div>
  74.         <div data-aceptar="inferior"></div>
  75.         <div></div>
  76.     </div>
  77. </body>
  78. </html>
__________________
nahueljose.com.ar