9 de febrero de 2009
Vamos a aprender a crear cuadros de texto que se puedan arrastrar por toda la página, utilizando solamente HTML, un poco de CSS y una librería de JavaScript. Antes de empezar puedes ver un ejemplo del resultado final en este enlace y si te gusta, continúa leyendo.
- Lo pimero que tienes que hacer es crear una capa (<div>) y ponerle la "id" que tú creas necesaria, dentro de esta capa tendremos todos los elemenos que queramos que sean arrastrables, en el artículo original le ponen "draggables", vamos a suponer que yo también le pongo ese nombre.
- Dentro de la <div> "draggables" creamos otras capas <div>, el código quedaría así:<div id="draggables">
<div>Contenido 1</div>
<div>Contenido 2</div>
<div>Contenido 3</div>
</div>
- Agregamos la libería de JavaScript, quedando así:
<script type="text/javascript" src="mootools.svn.js">
</script>
-
Continuamos copiando y pegando este código dentro de la etiqueta <head>:<script type="text/javascript">window.addEvent('domready', function(){
$('#draggables div').each(function(drag){
new Drag.Move(drag);});
});
</script>
-
Ya tenemos todo programado para que los elementos <div> que están dentro del <div> "draggables" puedan ser arrastrados. Pero, si no te gustan las <div> y quieres que se pueda arrastrar un elemento <h1>, <p> o cualquier otro que te guste, sólo tienes que cambiar "div" por el elemento que quieras arrastrar, en esta fila de código: $('#draggables div').each(function(drag){
- La parte de CSS es simple estética, ponerle una "id" a las capas que van a ser arrastradas y luego ponerle un poco de estilo, en el artículo original denominaron a las capas como "drag" y luego programaron un poquito de de CSS:
.drag{border:solid 6px #DEDEDE;
background:#FFF;
width:200px;
height:150px;
...
}
Y ya está, ya sabes como programar en HTML unos elementos que se puedan arrastrar, espero que te haya gustado y si tienes alguna duda, aunque no sea mi artículo intentaré ayudarte.
Actualizado (10-2-2009): Para ver el ejemplo tienes que entrar en la página del tutorial y acceder desde ahí.
Sacado de Woork [Ultra small code to drag everything in HTML pages]
Autor: Jorge Bordás