Arrastrar elementos html con jQuery UI + mini juego rompecabezas.



jQuery UI

WIKI: jQuery UI es una biblioteca de componentes para el framework jQuery que le añaden un conjunto de plug-inswidgets 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:


Vamos a ver nuestro mini rompecabezas en acción. 



También te podría interesar:
  1. Tutorial Joomla - Insertar mapas de google en nuestro sitio web
  2. Curso online Cómo Programar para Emprendedores - HTML y CSS
  3. Agregar y eliminar clases en jQuery.

¡Ayúdanos a seguir creciendo, comparte en tus Redes Sociales!

Siguiente
« Prev Post
Anterior
Next Post »