JMiur [E]

Una de las tantas posibilidades de script.aculo.us es el uso de las funciones de Drag and Drop. No es algo que tenga una gran utilidad práctica pero es bastante sencillo de usar.

Para probarlas, debemos seguir el mismo procedimiento que con los efectos; descargar las librerías, alojarlas en un servidor propio y cargarlas en nuestra plantilla. Empecemos con esto ya que es una pregunta repetida y hay varias alternativas.

Si no tenemos nada, debemos de empezar descargando el ZIP que contiene todos los archivos necesarios y luego alojarlos en un servidor propio. Como mínimo, necesitaremos los siguientes scripts:
prototype.js
scriptaculous.js
effects.js
dragdrop.js
el resto son optativos; cada uno de ellos se utiliza para poder implementar funciones especiales (builder.js, controls.js, slider.js, sound.js).

Los agregamos a la plantilla, justo antes de </head>:
<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_scriptaculous.js?load=effects,dragdrop"></script>
Si ya tenemos alguno de los módulos en uso, por ejemplo porque usamos LightWindow, basta agregar dragdrop.js en la llamada:
<script type="text/javascript" src="URL_scriptaculous.js?load=effects,dragdrop"></script>
Una segunda alternativa si nos queremos ahorrar el trabajo de alojar los archivos es utilizar las librerías de Google. Este es el método más sencillo si se trata de hacer pruebas rápidas ya que basta agregar antes de </head>:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>
De esta manera se cargarán todos los módulos que existan.

Una última posibilidad es usar Protoculous que es una librería comprimida y que en un solo archivo nos permite usar todas las funciones [más información]

Bueno, ahora que ya tenemos los scripts, vamos a ver como funcionan.

Para hacer que un elemento sea "arrastrable" basta crearlo con la clase Draggable e identificarlo utilizando el atributo ID. La sintaxis general es esta:

new Draggable(elemento);

Suena complicado pero no lo es, bastan dos líneas de código; por ejemplo:
<div id="demo"> [ ... el contenido ... ] </div>
<script type="text/javascript"> new Draggable('demo'); </script>
Este es un ejemplo sencillo usando un DIV donde sólo hay un texto:



<div style="text-align: center;font-size:17px;">
La palabra
<span id="demo1" style="color:#FF0000;font-weight:bold;cursor:move;">MOVER</span>
se puede arrastrar.
</div>
<script type="text/javascript">new Draggable('demo1');</script>



<img id="demo2" src="URL_imagen"/>
<script type="text/javascript">new Draggable('demo2');</script>

En todos los casos, basta colocar un script después del elemento pero también podemos agregarle algunas opciones para controlarlo:
<script type="text/javascript">
new Draggable(IDelemento, opciones);
</script>




zindex (por defecto es 1000) indica la propiedad CSS z-index del elemento cuando lo arrastramos; esto hace que aparezca "por encima" de todos los otros elementos de la página; al soltarlo vuelve a tener su valor normal.




constraint es una de las formas en que podemos limitar el desplazamiento y por defecto no está definida. Hay dos posibilidades:

new Draggable('demo', {constraint:"horizontal"} );
new Draggable('demo', {constraint:"vertical"} );




starteffect, endeffect y reverteffect definen funciones que podemos llamar al comenzar a arrastra un elemento o al soltarlo.

new Draggable('demo', {starteffect: unaFuncion('demo')} );
new Draggable('demo', {endeffect: otraFuncion('demo')} );


También hay una serie de funciones predefinidas o eventos (callbacks) que pueden llamarse dentro de las opciones.

onStart se ejecuta cuando comenzamos a arrastar el objeto
onDrag se ejecuta mientras arrastamos el objeto
change se ejecuta cuando cambiamos la posición original del objeto
onEnd se ejecuta cuando soltamos el objeto


Si queremos deshabilitar un elemento, es decir, hacer que ya no sea "arrastrable" y que vuelva a su posición original debemos usar una variable para crearlo y luego, "destruirlo
var unNombre = new Draggable('demo', {revert: true});
.......
unNombre.destroy();


Una forma muy sencilla de limitar los movimientos es colocar los elementos "arrastrables" dentro de un DIV al que le damos propiedades CSS especiales para que todo lo que se salga de él, no se vea:



<div style="border:1px solid #444444; height:250px; overflow:hidden; position:relative;
margin:10px auto; width:450px;">
<img style="cursor:move; position:absolute; left:10px; top:10px;"
id="demoIMG1" src="URL_imagen1" />
<img style="cursor:move; position:absolute; left:390px; top:10px;"
id="demoIMG2" src="URL_imagen2" />
<img style="cursor:move; position:absolute; left:10px; top:190px;"
id="demoIMG3" src="URL_imagen3" />
<img style="cursor:move; position:absolute; left:390px; top:190px;"
id="demoIMG4" src="URL_imagen4" />
</div>
<script type="text/javascript">
new Draggable('demoIMG1');
new Draggable('demoIMG2');
new Draggable('demoIMG3');
new Draggable('demoIMG4');
</script>

38 comentarios:

Anónimo  

:D
¡Cerca de poder armar un ajedrez! Como es (1), no pregunto si hay una coordenada z para mover al alfil. ¿Se podría aplicar a cualquier elemento, siempre que se la asigne ID?
Gracias, gracias, gracias.
(Espero (2) mientras me enojo con la lentitud de la tabla de contenidos.)

Responder
Jabba  

Enorme el tutorial.

La verdad que da juego Scriptaculous (por no hablar del nombrecito...).

Juntas a Scriptaculous, Papadopoulus y Papalukas y te montas un equipo de miedo xD.

Responder
rositaduran  

Genial, genial, eres un auténtico genio virtual JMiur!

Responder
JMiur  

Sí, ls, puede aplicarse a cualquier elemento así que, el ajedrez sería posible :D

¿Y no falta Jabbapolus en la lista? :D

Responder
Jabba  

Bueno, si pones a Jabbapolus ya solo nos falta el pívot xD.

Responder
Blog nuevo  

Siempre me imaginé un blog donde se pudieran arrastrar todos los elementos y que cuando el mismo usuario vuelve a entrar (debe registrarse para guardar la info) los elementos aparecen como los acomodó, o sea como le gusta ver el sitio.

:-)

Responder
JMiur  

Algo de eso podría hacerse. Lamentablemente, no conozco como se maneja el tema de las cookies pero ese podría ser un punto de partida.

Lo del registro sería mejor porque podrían guardarse los datos en alguna parte.

Responder
Gem@  

Justo lo que comentaba el otro día que había visto hace tiempo, pero explicado magistralmente si señor :)

Responder
JMiur  

Gracias Gem@ :D

Responder
Anónimo  

Ojalá que vaya todo bien en Wordpress :), buena explicación, como siempre.

Saludos JMiur.

Responder
JMiur  

No hay ningún motivo para que no funcione pero ... uno nunca sabe :D

Responder
Anónimo  

Muy bueno, me han sido de gran ayuda los scripts y los comentarios que están aquí. Gracias desde Uruguay

Responder
Gem@  

¿Por qué a tu ejemplo sale el puntero diferente a ponerlo sobre la imagen?

Responder
Gem@  

Sorry.. este es para suscribirme que si no me pierdo :)

Responder
JMiur  

El cursor de cualquier elemento, pude definirse con CSS. En este caso:

cursor: move;

Por defecto, los navegadores colocan un cursor según sea el tipo de elemento pero, puede cambiarse a gusto.

Responder
Gem@  

Aún sigo por aquí....
Me gustaría saber entonces si añadimos la imagen fuera de una entrada la ubicación se la podemos asignar con css ¿o también se puede en el mismo código de la imagen?

Responder
Gem@  

Lo intenté con css pero entonces la imagen se deja arrastrar pero regresa a su punto de partida. Yo quisiera ubicarla en un sitio y que se deje arrastrar por la pantalla.

Responder
JMiur  

Me perdí un poco en la pregunta.

si añadimos la imagen fuera de una entrada ¿eso que significa? ¿si la colocamos en la plantilla? ¿en la sidebar? Esa es la parte que no termino de comprender.

Por ejemplo, AQUÍ puse dos imágenes en la misma plantilla.

Debajo del header, dentro del DIV content-wrapper que es toda la pantalla le coloco sólo esto:
<img id="demo1" src="URL_imagen"/>
<script type="text/javascript">new Draggable('demo1');</script>

Esa imagen (la varita triste) puede desplazarse y queda donde la pongas, en cualquier parte de la ventana y no vuelve a su posición.

En la sidebar, puse otra dentro del DIV sidebar-wrapper con un codigo similar y si te fijas, verás que también se quedad donde la colocas pero, si la sacas de la sidebar, desaparece porque, ese drag funciona dentro del contenedor.

Me parece que también me perdí un poco con la respuesta :D

Responder
Gem@  

No te perdiste es que con las prisas me expliqué fatal.
Así como dices es como he probado y el de la carita triste sale siempre a la izquierda yo quisiera que al calgar la página estuviera siempre a la derecha, poder escoger más o menos la altura y el sitio.
Por eso te decía lo de añadir en la css unos estilos con la ubicación, y lo hice pero entonces la carita no se queda donde la llevas sino que al soltarla regresa a su punto de partida.
Ahora mejor ¿verdad?

Responder
JMiur  

Me imaginé que era algo así pero no estaba seguro :D

No probé pniendo estilo CSS a la imagen en si misma porque no te ha funcionado, entoces, pruebo con algo diferente. Coloco la imagen en un div al que le doy propiedades.

Toma la misma imagen y coloqé el div justo despué de <div id='content-wrapper'>

&t;div style="position: relative; left: 500px; top: 50px;">
... aqui el mismo código de antes, la imagen y el script del drag
</div>

Si te fijas en el mismo enlace, la carita triste ahora está al lado de la otra y puede seguir moviéndose sin problemas.

Podrían usarse otras propiedades como margin o padding para posicionarla pero es más fácil con left y top y eso no desconfigura nada del resto de la plantilla.

Ahora, estoy intrigado por saber a dónde quieres llegar :D

Responder
Gem@  

Ahora si, ahora resulta bien.
Pero no te intrigues es un efecto que me ha gustado desde que lo vi, y por una cosa u otra lo fui dejando.
Además debe tener más aplicaciones que como mero objeto decorativo.
Ummm lo mismo pongo algún adornito navideño (eso es objeto decorativo) jajajaja
Gracias ;)

Responder
JMiur  

Me alegra que lo consiguieras.

Imagino que debe tener otras aplicaciones serias pero, no las conozcco :D

Sería perfecto como adorno :D

Responder
Nicar  

No me canso de darte las gracias.
Con esta entrada llevo entretenido un par de días. Que si las transparencias,que si el Gimp,que si buscar imagenes navideñas, que si..
Salud y Felices Fiestas.

Responder
JMiur  

Saludos NKR :D

Responder
Anónimo  

Fuera del nuevo año que vino queria hacerte una duda que tengo desde que conosco HTML ¿Qué diferencia hay entre <span> y <div>?. Gracias y Muy bueno el tuto de Scriptaculous.

PD:Felíz año. ;)

Responder
JMiur  

En principio, un DIV es una etiqueta de bloque y SPAN es una etiqueta inline. La primera, por defecto, crea un salto de línea automático y la segunda no. Fijate en un ejemplo así y verás la diferencia:

Usando la etiqueta <div style="font-weight:bold;">DIV<div> para poner negritas.

Usando la etiqueta <span style="font-weight:bold;">SPAN</span> para poner negritas.

Responder
Anónimo  

Y en el caso de los parrafos <p></p>?

Responder
JMiur  

La etiqueta P también es una etiqueta de bloque, crea un salto de líinea automático en cualquier navegador a menos que se establezca un estilo CSS. La idea es que sólo se utilice para párrafos (textos).

Tanto DIV como SPAN se crearon para contener estilos, para contener el atributo STYLE ya que ninguna de las dos tiene propiedades definidas por el navegador. Son "contenedores" de atributos.

Responder
Chaos The Kid  

Soy nuevo en esto de los scripts, y queria saber si se podia poner un drag and drop en un comentario, y si se puede ¿como?

PD:¡Que buen tutorial!

Responder
JMiur  

No. dentro del formualrio de comentarios no puede hacerse.

Responder
Joan Irazu  

:( NO ME FUNCION, HAY ALGO QE LO ESTE INPIDIENDO?

Responder
JMiur  

No sé dónde está así que no sabría decirte. Revisa que todo sea correcto y que los scripts funcionen.

Responder
Felipe Calvo Cepeda  

Esta entrada no la había visto.
Seguro me divertiré un dia de estos probando un rato, la cosa se ve buena!

Responder
JMiur  

Es divertido. No le veo mucha utilidad pero es interesante.

Responder
blendsoft  

Estimados No funciona en IE ,o quiza estoy haciendo algo que me impida el funcionamiento en IE......

JMiur  

No vepo preoblemas en IE así que deberas revisar.

Responder
znarf1587  

Muy buen aporte pero alguien me podria decir por que no me funciona en el explorador firefox 25.0, gracias de antemano por sus comentarios

JMiur  

No veo problema alguno.

Responder

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

 
CERRAR