Cómo hacer que se pueden arrastrar algo en jQuery

Haciendo un elemento en una página Web pueda arrastrar añade la interactividad del usuario con sus diseños, y puede aumentar el factor "wow" de un sitio web. Esta función es fácil de añadir si instala jQuery UI, o la interfaz de usuario, a sus páginas web. JQuery UI es un add-on para jQuery, la biblioteca JavaScript escritos con diseñadores en mente. Este complemento viene con una variedad de funciones de interactividad, como "arrastrable ()" para los artículos que pueden arrastrarse. Una vez que usted se sienta cómodo con esta y otras funciones de jQuery, puede crear aplicaciones web interactivas mediante la combinación de ellos.

Compruebe que el código incluye una referencia al archivo de la biblioteca jQuery. Añade este código dentro de la "cabeza" etiquetas de su página web, si usted no encuentra lo que ya existe:

script src type = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" = "text / javascript" / script

Agregar la biblioteca jQuery UI a su página Web:

script src type = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" = "text / javascript" / script

Este código va después de la referencia de la biblioteca jQuery y se suma a las interacciones del usuario, tales como arrastrar, colocar y clasificar.

Comience su guión con una función para comprobar si la página ha terminado de cargar:

guión

$ (Function () {

});

/ Script

En este ejemplo se utiliza una versión abreviada de "$ (document). Ready ()". Coloque todo el código script de jQuery entre las llaves de esta función.

Desplácese hacia abajo en el código HTML y buscar un div o cualquier otro elemento que usted desea hacer arrastrarse. Las etiquetas que crean este elemento necesitan nombres de ID por lo que les puede hacer referencia en el script:

div id = "dragme"

Se trata de un div con un nombre de ID de "dragme."

/ Div

Obtener el nombre de ID para el elemento y volver a la cabecera de su código HTML para seguir escribiendo el guión.

Objetivo para el elemento por su nombre ID utilizando un selector de jQuery. Estos selectores imitan selectores CSS. En CSS, el selector es "# dragme" sin las comillas. En jQuery, selectores de envoltura entre paréntesis y comillas simples, precedidos por un signo de dólar:

$ ('# Dragme')

Añada la función "arrastrar ()" al selector de jQuery:

$ ('# Dragme') desplazable ().;

Por sí mismo, el "arrastrar ()" función sólo hace un arrastrar elemento en la pantalla.

Restringir el elemento desplazable dentro de un contenedor, envolviendo sus etiquetas HTML en las etiquetas "div" y editar la función "arrastrar ()":

$ ('# Dragme') desplazable ({contención: 'padre'}).;

Restringir el movimiento del elemento arrastrable a horizontal o vertical:

$ ('# Dragme-updown') desplazable ({ejes: 'y'}).;

$ ('# Dragme-RightLeft') desplazable ({ejes: 'x'}).;

El eje Y representa valores verticales, mientras que el eje x representa valores horizontales.

Consejos y advertencias

Utilice "arrastrar ()" en conjunción con "lanzables ()" para crear efectos de arrastrar y soltar en sus páginas Web.