Cómo hacer Drag & Drop con jQuery

Una de las características más interesantes de hacer en HTML es quizá el efecto de arrastrar o soltar (drag & drop), función que se puede explotar perfectamente ya que CSS nos permite hacer cualquier elemento flotante, por lo tanto de alguna forma debería de ser fácil poder implementarla.

Desgraciadamente con el uso de Javascript la implementación es un poco extensa, pero es ahí donde sale nuestro amado jQuery que tiene una librería dedicada a efectos y widgets. La librería se llama jQuery-UI y con esa vamos a ver cómo hacer Drag & Drop con jQuery de una forma asquerosamente fácil, hasta se van a reír

Nivel del tutorial: Fácil
Soportado por todos los navegadores

Demo del tutorial

HTML

Lo primero que necesitamos hacer es linkear tanto la librería de jQuery como de jQuery-UI. Podemos descargar jQuery-UI desde la página oficial. Lo que debemos de hacer es descomprimir el .zip que nos dan y solamente copiar el archivo .js, ya después en otros tutoriales utilizaremos todo lo que nos ofrece la carpeta, pero por ahora solo necesitamos eso.

Después para el ejemplo uso una caja o más para que aprecien el efecto, nada especial, solo un nombre de clase.

jQuery

Ahora si, para hacer que nuestra cajita se mueva por toda la pantalla basta con referenciarla y asignarle el método .draggable(); y listo, si probamos veremos que ya podemos mover nuestra cajita.

Otras opciones

Podemos hacer otros efectos de forma muy sencilla, como por ejemplo, para que cambie el cursor cuando movamos la cajita usamos lo siguiente:

Podemos restringir el movimiento de las cajas para que solo se muevan dentro de un determinado contenedor, así:

En este caso lo restrinjo en base a su contenedor body, pero podemos incluir cualquier capa que esté conteniendo a las cajas. Por último podemos hacer un efecto bastante interesante al arrastrar. Lo que podemos hacer es que nos permita arrastrar nuestra cajita, pero que cuando la soltemos regrese a su posición inicial antes de que fuera arrastrada:

Notas

Esta librería tiene muchas funciones, eventos y métodos para implementar, nada más falta echar un vistazo a la documentación para encontrar la mejor forma de explotar la librería para nuestra aplicación.