En este art\u00edculo vamos a ver como mover elementos o contenedores con jQuery UI y su componente Draggable.<\/p>\n
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\u00e1gina. Todos estos elementos no van a ser est\u00e1ticos sino que vamos a poder moverlos de lugar pulsando en ellos con el bot\u00f3n izquierdo del rat\u00f3n y arrast\u00e1ndolos hasta el lugar deseado.<\/p>\n
Para conseguir esto vamos a necesitar incorporar en el <head> de nuestra p\u00e1gina la librer\u00eda jQuery, la customizaci\u00f3n de la interfaz de usuario y la llamada a la funci\u00f3n draggable().<\/p>\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/styles.css\" \/>\r\n<script type=\"text\/javascript\" src=\"..\/jquery.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"js\/jquery-ui-1.8.22.custom.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function() {\r\n\u00a0\u00a0\u00a0 $('#header').draggable();\r\n\u00a0\u00a0 \u00a0$('#central').draggable();\r\n\u00a0\u00a0 \u00a0$('#column-right').draggable();\r\n\u00a0\u00a0 \u00a0$('#footer').draggable();\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n});\r\n<\/script><\/pre>\nEn la hoja de estilos que estamos incluyendo defimos la estructura fija de los elementos que podemos mover seguidamente con la funci\u00f3n draggable() de jQuery UI.<\/p>\n
El HTML que tendremos dentro del <body> es el siguiente:<\/p>\n
<div id=\"content\">\r\n\u00a0\u00a0 \u00a0<div id=\"header\">Cabecera<\/div>\r\n\u00a0\u00a0 \u00a0<div id=\"central\">Bloque central<\/div>\r\n\u00a0\u00a0 \u00a0<div id=\"column-right\">Columna derecha<\/div>\r\n\u00a0\u00a0 \u00a0<div id=\"footer\">Pie de p\u00e1gina<\/div>\r\n<\/div><\/pre>\nPara ver esto m\u00e1s claro lo mejor es observar el ejemplo en funcionamiento y compruebes su funcionamiento arrastando los elementos de la p\u00e1gina manteniendo el bot\u00f3n izquierdo del rat\u00f3n pulsando mientras arrastras.<\/p>\n