WIKI: jQuery UI es una biblioteca de componentes para el frameworkjQuery que le añaden un conjunto de plug-ins, widgets y 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 elementos html a través de nuestro navegador web usaremos la función .draggable() de jQuery UI, su sintaxis es:
$('elementoHTML').draggable();$(' ') transforma nuestro elemento html sea un <div>, <p>, <img> <button> o cualquier otro en un objeto jQuery, 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ódigo jQuery 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 html>
<html>
<head>
<style>
h2 {
font-family:arial;
}
img{
height: 200px;
width: 200px;
}
</style>
<title>Arrastrar 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>
<h2>Arrastra 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>
</html>
Usamos la etiqueta HTML <img> para colocar la url de nuestras imágenes, y un poco de CSS 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:
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure