WIKI:jQuery UIes unabibliotecade componentes para elframeworkjQueryque le añaden un conjunto deplug-ins,widgetsy efectos visuales para la creación de aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery(find something, manipulate it: encuentra algo, manipúlalo).
Para arrastrar elementoshtml a través de nuestro navegador web usaremos la función.draggable() dejQuery UI, su sintaxis es:
$('elementoHTML').draggable();$(' ') transforma nuestro elementohtml sea undiv, p, img button o cualquier otro en un objetojQuery, y la función.draggable() nos permitirá arrastrar éste elemento a través de nuestro navegador.
Si lo que deseamos es arrastrar una imagen a través de nuestro navegador, nuestro códigojQuery sería:
$(document).ready(function(){ $('img').draggable();});En el siguiente ejemplo se encuentran cuatro partes de una imagen las cuales han sido recortadas previamente, la dinámica sería arrastrar éstas imágenes hasta formar la imagen original, algo así como un juego de rompecabezas (solo que de cuatro piezas).
!DOCTYPE htmlhtml head style h2 { font-family:arial;} img{ height: 200px; width: 200px;} /style titleArrastrar elementos html/title script src="http://code.jquery.com/jquery-1.9.1.js"/script script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"/script /head body h2Arrastra los cuadros hasta formar la imagen correcta del paisaje/h2 img src="http://4.bp.blogspot.com/-sGy6-akW0oc/UfBOS6lxnbI/AAAAAAAAAUU/rHCro9FAScw/s1600/Paisaje-m+%C3%ADgico_swap_part1x2.jpg"/ img src="http://4.bp.blogspot.com/-55iptsHA_ks/UfBOTNJFiQI/AAAAAAAAAUc/91-KQw4Y7ZU/s1600/Paisaje-m+%C3%ADgico_swap_part2x2.jpg"/ img src="http://4.bp.blogspot.com/-d7ZnPl3lNG0/UfBOSpkr1QI/AAAAAAAAAUI/bH_NKfmLOmQ/s1600/Paisaje-m+%C3%ADgico_swap_part1x1.jpg"/ img src="http://2.bp.blogspot.com/-syskVr92MJs/UfBOSjFz8FI/AAAAAAAAAUM/NvGGyYq6zHQ/s1600/Paisaje-m+%C3%ADgico_swap_part2x1.jpg"/ script$(document).ready(function(){ $('img').draggable();}); /script /body/htmlUsamos la etiqueta HTMLimg para colocar la url de nuestras imágenes, y un poco deCSS para redimensionar sus tamaños(height: 200px,width: 200px). Además nuestro código jQuery previamente mencionado para que realice el efecto.
La imagen original es:
Vamos a ver nuestro mini rompecabezas en acción.
