Los elementos arrastrables se definían así:
new Draggable(IDelemento, opciones);
Para controlar lo que hace un elemento cuando lo soltamos luego de arrastrarlo, usamos este método:
Droppables.add(IDelemento, opciones);
donde el ID es el del elemento destino es decir, donde soltaremos algo que arrastramos.
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="bloqueArrastrar" style=".......">MOVER</div> <div id="bloqueSoltar" style="......."> </div> <script type="text/javascript"> new Draggable('bloqueArrastrar'); Droppables.add('bloqueSoltar'); </script>
Hoverclass es la clase CSS optativa que será agregada al elemento contenedor cuando algo sea arrastrado dentro de ella.
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="bloqueArrastrar" style=".......">MOVER</div> <div id="bloqueSoltar" style="......."> </div> <script type="text/javascript"> new Draggable('bloqueArrastrar', {revert: true}); Droppables.add('bloqueSoltar', {hoverclass: 'claseHover'}); </script>
En el ejemplo, uno de los bloques es aceptado y el otro no:
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<div id="demo1" class="esteSI">MOVER</div> <div id="demo2" class="esteNO">MOVER</div> <div id="boqueSoltar"> </div> <script type="text/javascript"> new Draggable('demo1', {revert: true}); new Draggable('demo2', {revert: true}); Droppables.add('bloqueSoltar', {accept: 'esteSI', hoverclass: 'claseHover'}); </script>
![](http://2.bp.blogspot.com/_hljKDuw-cxQ/RwsTUmY2u8I/AAAAAAAADBA/-5XcB0x71AM/s00/verocultarCodigo.gif)
<script type="text/javascript"> (function() { var p = $('puzzle'), info = $('puzzleinfo'), moves = 0; Sortable.create('puzzle', { tag: 'img', overlap: 'horizontal', constraint: false, onUpdate: function() { info.update('Hasta ahora hubo ' + (++moves) + ' movimiento' + (moves > 1 ? 's' : '')); if (Sortable.sequence('puzzle').join('') == '123456789') info.update('Puzzle resuelto en ' + moves + ' movimientos').morph('felicitaciones'); } }); })(); </script> <style type="text/css"> #puzzle {margin: 0 auto; width: 450px;} .felicitaciones {color: #FF9933 !important;} </style>
27 comentarios:
O_O
Resuelto en 42 movimientos.
Me siento... tonto :(.
¡Buenísimo esto!
Resuelto en 54 xD
40! :D
Jajajaja no se me ocurrió que se pusieran a jugar pero, como siempre sale lo mismo, ordenado de la misma forma, tengo una mala noticia: se resuelve en 7 movimientos :D
Claro, una vez que uno sabe cómo es el maldito dibujo :D
¡40, 42, 54! Falta pagar muchos fichines, gente. Desafíos en calle Lavalle :D.
Gracias, bigote, por seguir con drag&drop.
Un abrazo madruguero.
Que truco más chulo!!!. Aprovechando... si tengo una imágen cualquiera como pueda "trocearla" y generar a partir de ahí un puzzle y luego implementar este truco, sería genial!!!. Gracias por todo.
Un saludo desde Madrid.
En 11 :)
ahhhh 15!! demonios!!
demonios 17!!! estoy empeorando!!!
heyyyy 14!!! mejor ya no me clavo tango......buen truco.
Jajajajaa XD
Sí Darwin, para este modelo que es muy sencillo, basta cortar una imagen en pedazos y reemplazar la imagen en el código adjunto. No he probado mucho más allá que eso.
O_O;;
Hoy llego, lo intento y lo hago en 7 movimientos.
¡35 MOVIMIENTOS MENOS!
O.o Y pa' que vean que no miento:
http://i195.photobucket.com/albums/z191/fercoja_11/yay.png
[Nótese el glomoroso nombre del PNG: "yay.png"]
XD
Jajajaja eso se llama ser perseverante :D
Perseverancia en un intento. Qué eficiencia.
Que mal me siento, lo pille en 54 movimientos XD
18 movimientos :)
8 mov :)
Se resuelve en 6 movimientos, simplemente empezando por arriba a la izquierda y siguiendo hacia derecha y abajo.
Sr Miur...hace unos dias que he actualizado el navegador Mozilla Firefox a la última versión 3.6 y he detectado un problema en la pagina de diseño del blog,ya que no puedo cambiar los gadgets de sitio pues no me funciona lo de arrastrar y soltar,sin embargo si va bien con Internet explorer.
He buscado en Mozilla respuesta pero no doy con ello.
El tema que le expongo lo he comprobado varias veces instalando y desisntalando la version de Mozilla; si vuelvo a la anterior version funciona bien si actualizo no.
Desearia me pudiera orientar hacia donde puedo encontrar una solucion,que no sea la de no actualizar Mozilla.
Gracias.
Anna:
Lo mismo me han preguntado varias personas y he visto en mis blogs que en algunos casos pasa lo mismo. Evidentemente, hay algo que Blogger deberá corregir; no sabría decir qué es.
Mientras eso se corrige, pueden moverse gadgets desde el mismo HTML, sin expandrir los artilugios, los gadgets sól ose muestran con una línea de código así que es bastante sencillo de modificar, por lo menos, temporalmente..
Gracias Sr Miur,he dejado aviso en "grupo de ayuda " de Blogger y cuando he vuelto me he encontrado con que le pasa a más gente,así que supongo que como Ud,bien dice,habrá que esperar a que lo rectifiquen.
Estuve buscando. Vi algunos reportes del error pero, por ahora, nada concreto :(
De primera, en 11 movimientos... no había visto esta entrada :D creo que me llevo el puzzle
He vuelto a perder "las esperanzas" y sigo con calma. Algo es algo, al menos no estoy solita, solita....:D
Voy a tener asumir mis limitaciones o me voplveré loca
bueeeeejejey :P
Oh si. Asuimir limitaciones es importante porque no son permanentes. Eso que hoy no sale, saldrá mañana o ya encontraremos algo que nos interes más. Nada es definitivo ¡Hay tantas cosas que no sé hacer!!!
10 :D:D oye..soy algo nuevo en esto y no se exactamente como introducirlo en mi pagina web:D ...he insertado el javascript y el CSS...ahora supongo k tengo que descargar las 9 imagenes..y que tengo que poner en el html??
Ya no recuerdo si el HTML se podía descargar o se copiaba desde el código fuente.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...