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
 
Windows Live Hotmail y sus problemas en Linux
Hace unos días Microsoft ha modificado el aspecto y funcionamiento de Windows Live Hotmail , a raíz de este cambio muchos usuarios se han mostrado disconformes por no tener la posibilidad de volver a la versión anterior. Ahora a ello se le suma los problemas producidos en ... [+]
 
¿Quién es más pirata?
Los principales sindicados de España, UGT y CCOO, han realizado un estudio en el cual se afirma algo que desde luego ya está trayendo cola, y es nada más y nada menos que... la piratería causa desempleo. Tal es así, que ambos afirman que a causa de la piratería digital ... [+]
 
Ubuntu apunta a las tablets
Como no cabe la menor duda, el mercado de los móviles parece ser uno de los más efectivos de estas épocas, mejorando constantemente y con viento en popa. Por eso mismo Ubuntu planea lanzarse a este mercado donde actualmente Symbian, Windows Phone, iOS, y Android dominan ... [+]
 
Blender: Actualización 2.49b
Blender , es un software de código abierto para el modelado 3D, animación, renderizado, post-producción, creación interactiva y reproducción. Disponible para Windows, Linux, Irix, Sun Solaris, FreeBSD o Mac OS X. Permite el modelado de una amplia gama de objetos 3D ... [+]
 
Formateador online de archivos PHP
beautifyphp.com no ofrece nada que un buen editor de código no tenga, pero no siempre tenemos uno a mano... Se trata de una aplicación a la que tendremos que enviar un archivo PHP para que de formato a las lineas ofreciendo una mejor visibilidad. La salida puede ser básica ... [+]
Ayuda Centro Protección de Menores de Ghana
Cromos de la Liga
Cual es mi IP  |  Routers Wireless  |  Routers Ethernet  |  Nomenclatura  |  Puertos  |  Noticias  |  Enlaces
© 2019 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