Cual es mi IP
Búsqueda personalizada
TwitterDel.icio.usDiggFacebookGoogle BookmarksTechnoratiYahooRSS
Noticias
09_02_2009
Cuadros de contenido arrastrables en HTML

Cuadros de contenido arrastrables en HTML programacion general

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]

Jorge Bordás en www.dosbit.com



0 comentarios sobre la noticia.

Noticias relacionadas
 
Woices - Grabaciones de sonidos de todo el mundo
Aunque la frontera entre la versión en español y en inglés no parece estar muy definida, woices es un interesante proyecto que me ha llamado la atención. Los usuarios pueden subir sonidos de cualquier parte del mundo, desde una fuente del pirineo hasta la risa de un niño ... [+]
 
Envía archivos de hasta 8GB con LargeDocument
Todos sabemos que los servicios de mails tienen un tamaño limitado a la hora de enviar informació n, y esto impide que archivos pesados puedan ser enviados correctamente. LargeDocument permite al usuario enviar hasta 8GB de espacio gratuitamente, y no necesita registro ... [+]
 
Thoof - Compartir las mejores urls con tus amigos
Thoof es una nueva red social en la que los usuarios podrán compartir direcciones web y noticias interesantes encontradas en el mundo virtual. He recibido hace unos minutos la invitación y ya he podido navegar por las funcionalidades de este nuevo sitio. Podemos escribir ... [+]
 
Ono lanza su sitio para promocionar las conexiones de 50 MB
Ono ha lanzado un sitio para publicar y explicar las novedades que traen sus nuevas conexiones de altas velocidades. En el sitio se habla únicamente de conexiones de 50 MB, y explica las posibilidades que ofrece una conexión de ese ancho de banda, asegurando que un DVD de ... [+]
 
FinFoo, red social de bolsa y finanzas
El equipo de Gonzalo Ruíz ha lanzado recientemente y de forma pública FinFoo en fase beta, una nueva red social de bolsa y finanzas , temática muy poco común en la Web 2.0. Básicamente encontrarás todo lo que puedas necesitar en una web de nueva generación: perfil propio, ... [+]
Ayuda Centro Protección de Menores de Ghana
Cromos de la Liga
Cual es mi IP  |  Routers Wireless  |  Routers Ethernet  |  Nomenclatura  |  Puertos  |  Noticias  |  Enlaces
© 2020 Cual es mi IP. Todos los derechos reservados.  Nota Legal  |  Mapa del sitio  |  Política de privacidad  |  RSS  |  Twitter  |  Facebook
diseño: dommia
Diseño Web
Dommia Soluciones Internet
c/ de la Plana 13, Bajos 3
08032 - Barcelona
Tel. 902 024 678 | +34 934 209 404
Portfolio visible en: www.dommia.es