JMiur [E]

El Drag and Drop de script.aculo.us tiene dos partes, arrastrar (drag) y soltar (drop).

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.

Así, sin ninguna opción, si lo soltamos dentro del área, el objeto desaparece de nuestra vista:



<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
new Draggable('bloqueArrastrar');
Droppables.add('bloqueSoltar');
</script>

Este es el resumen de las posibles opciones a utilizar:

Hoverclass es la clase CSS optativa que será agregada al elemento contenedor cuando algo sea arrastrado dentro de ella.



<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>

Accept es también el nombre de una clase CSS pero con esta, podemos definir cuales son los elementos que podemos arrastrar y soltar en ese área.

En el ejemplo, uno de los bloques es aceptado y el otro no:



<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>

Aprovechemos el ejemplo del puzzle que nos muestra la Wiki de Scriptaculous para crear algo más y ver de qué se trata todo esto:



<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:

Fernandooo1  

O_O

Resuelto en 42 movimientos.

Me siento... tonto :(.

¡Buenísimo esto!

Responder
Anónimo  

Resuelto en 54 xD

Responder
Pepe  

40! :D

Responder
JMiur  

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

Responder
ls  

¡40, 42, 54! Falta pagar muchos fichines, gente. Desafíos en calle Lavalle :D.

Gracias, bigote, por seguir con drag&drop.
Un abrazo madruguero.

Responder
Darwin  

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.

Responder
Gem@  

En 11 :)

Responder
sharysce  

ahhhh 15!! demonios!!

Responder
sharysce  

demonios 17!!! estoy empeorando!!!

Responder
sharysce  

heyyyy 14!!! mejor ya no me clavo tango......buen truco.

Responder
JMiur  

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.

Responder
Fernandooo1  

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

Responder
JMiur  

Jajajaja eso se llama ser perseverante :D

Responder
Fernandooo1  

Perseverancia en un intento. Qué eficiencia.

Responder
Nav!´s  

Que mal me siento, lo pille en 54 movimientos XD

Responder
ΜigueŁ jίмenez™  

18 movimientos :)

Responder
ppppks  

8 mov :)

Responder
XaviGR  

Se resuelve en 6 movimientos, simplemente empezando por arriba a la izquierda y siguiendo hacia derecha y abajo.

Responder
Anna Jorba Ricart  

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.

Responder
JMiur  

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..

Responder
Anna Jorba Ricart  

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.

Responder
JMiur  

Estuve buscando. Vi algunos reportes del error pero, por ahora, nada concreto :(

Responder
egoloco  

De primera, en 11 movimientos... no había visto esta entrada :D creo que me llevo el puzzle

Responder
GARABATO  

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

Responder
JMiur  

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!!!

Responder
dany31y  

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??

Responder
JMiur  

Ya no recuerdo si el HTML se podía descargar o se copiaba desde el código fuente.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR