jQuery Draggable
En este artículo vamos a ver como mover elementos o contenedores con jQuery UI y su componente Draggable.
En el ejemplo que vamos a ilustrar vamos a tener una estructura simple HTML compuesto por una cabecera, un contenido central, una columna izquierda y un pie de página. Todos estos elementos no van a ser estáticos sino que vamos a poder moverlos de lugar pulsando en ellos con el botón izquierdo del ratón y arrastándolos hasta el lugar deseado.
Para conseguir esto vamos a necesitar incorporar en el <head> de nuestra página la librería jQuery, la customización de la interfaz de usuario y la llamada a la función draggable().
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#header').draggable();
$('#central').draggable();
$('#column-right').draggable();
$('#footer').draggable();
});
</script>
En la hoja de estilos que estamos incluyendo defimos la estructura fija de los elementos que podemos mover seguidamente con la función draggable() de jQuery UI.
El HTML que tendremos dentro del <body> es el siguiente:
<div id="content"> <div id="header">Cabecera</div> <div id="central">Bloque central</div> <div id="column-right">Columna derecha</div> <div id="footer">Pie de página</div> </div>
Para ver esto más claro lo mejor es observar el ejemplo en funcionamiento y compruebes su funcionamiento arrastando los elementos de la página manteniendo el botón izquierdo del ratón pulsando mientras arrastras.
Autor
¿Buscas trabajo de programador?
109 artículos que te podrían interesar
Ver más sobre
Deja una respuesta