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
 
De Sudoku, sudokus online con posibilidad de implatarlo en tu sitio web
De Sudoku es un sitio web donde podrás realizar sudokus simplemente por pasatiempo, para cuando te aburras pases el rato. Carece de registro lo cual lo hace todo mucho más rápido, es un sito web nuevo y ofrece un servicio muy bueno. La dificultad de cada sudoku depende de ... [+]
 
Zhube - Disco virtual, red social, favoritos.. todo en uno
En febrero os hablé de Zhube como un lugar para compartir archivos con otras personas. Las cosas han cambiado mucho en estos últimos meses. Alfonso Bueno, administrador de Zhube, me cuenta los cambios que ha sufrido la aplicación: - Espacio para subir fotos, videos y ... [+]
 
Entrevista a Artur Sales - Adagreed.com
Aunque Adagreed.com tenga muy poco tiempo de vida (un mes, para ser exactos) seguramente muchos de vosotros ya conocéis este proyecto, uno de los más originales de este año en el mercado de la publicidad online, con más de 40.000 usuarios registrados. Adagreed.com muestra ... [+]
 
Angel Writer, editor de texto con características de procesador de textos
Angel Writer es un editor de texto rico que permite crear documentos formateados y guardarlos en formato .RTF, .TXT o HTML. Ofrece todas las características estándar de los procesadores de texto, incluyendo soporte para tablas, imágenes, estilos de fuentes de texto y ... [+]
 
Cinco complementos indispensables para Mozilla Firefox
    Ayer te comentamos la última versión de Mozilla Firefox 29.0 . Hoy te sugerimos tres complementos para que puedas disfrutar este navegador. La primera extensión que mencionaremos es Video DownloadHelper 4.9.22 . Esta te permitirá descargar vídeos de una ... [+]
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