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
 
La importancia de contar con una contraseña segura, y cómo conseguirla (2/3)
A continuación continuaremos con el desarrollo del tema contraseñas , ya que resulta interesante y muy importante a la hora de tener conocimientos sobre los motivos de tener una contraseña segura y recomendaciones a la hora de crear una. Las peores contraseñas El ... [+]
 
IE Surfgear: Complemento para IE que mejora la legibilidad web
IE Surfgear es un complemento para el navegador de Microsoft Internet Explorer que "limpia" (por decirlo de alguna manera) la interfaz de una web. En ocasiones nos topamos con webs en las que es difícil leer el texto (ya sea porque el tamaño de la fuente es pequeño, o ésta ... [+]
 
Adobe podría lanzar un software de diseño de revistas para dispositivos Tablet
Adobe lanzaría una a plicación que simplificaría la labor de construcción y diseño de una revista para dispositivos Tablet. La aplicación haría las veces de puente entre InDesign y el software final de dispositivo, y facilitaría la labor de diseño así como aprovecharía las ... [+]
 
Malviviendo - Una serie hecha para Internet
Desde el día 24 de noviembre podemos disfrutar del primer episodio de una serie realizada íntegramente en Sevilla, con actores no profesionales y disponible gratuitamente en Internet. Cada minuto del piloto vale la pena, las tomas son excelentes y las ganas de hacerlo bien ... [+]
 
Orange permitirá el acceso a Wikipedia desde el móvil
Gracias a un acuerdo entre Orange y la Fundación Wikimedia , en breve los móviles del operador permitirán a sus usuarios el acceso al material de Wikipedia . Orange ya se encuentra preparando una campaña de marketing que dará a conocer el nuevo servicio. Este acuerdo se ... [+]
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