Cuadros de contenido arrastrables en HTML

html

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.

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

  3. Agregamos la libería de JavaScript, quedando así:
    <script type=“text/javascript” src=“mootools.svn.js”>
    </script>
  4. 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>
  5. 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){

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

Compartir en Google Plus

Acerca de Jorge Bordás

  • WordPress Comentarios
  • Facebook Comentarios