Cómo hacer un DIV que se pueden arrastrar con jQuery

JQuery, una biblioteca JavaScript, incluye la frase, "escribir menos, hacer más" bajo el logotipo en su página principal. Los desarrolladores web no escribir menos código JavaScript y jQuery porque sus bibliotecas manejan tareas complejas que normalmente requieren una amplia codificación. Al mover un bloque DIV HTML dentro de una página Web, por ejemplo, no es una tarea sencilla. Usando jQuery, puede agregar una línea a una función de JavaScript, y convertir cualquier DIV en su página en un componente que pueden arrastrarse.

Instrucciones

1 Lanzar su editor de HTML o un editor de texto normal. Abrir un documento HTML y pegar el siguiente código JavaScript dentro de la sección de la cabeza de su documento:

<Script type = "text / javascript"> </ script>

<Script type = "text / javascript"> </ script>

<Script type = "text / javascript">

Este código, organizado por Google, hace que los componentes requeridos JQuery disposición del documento HTML.

2 Agregue la siguiente instrucción DIV a la sección del cuerpo del documento:

<Div id = "div1">

<H1> Este es un encabezado en el DIV. Haga clic y arrastre esta partida para moverlo </ h1>

</ Div>

Este DIV, cuyo id es "div1", contiene un encabezado.

3 Pegue el siguiente código JavaScript en la sección de la cabeza de la escritura del documento:

<Script language = "javascript" type = "text / javascript">

$ (Function () {

$ ( "# Div1") .draggable ();

});

</ Script>

Esta función se ejecuta cuando se carga la página se muestra. Contiene una línea de código. Este código permite al Arrastrable plug-in de jQuery que hace posible para que usted pueda arrastrar objetos en una página Web. Anote el nombre de "div1" al principio de la declaración. Este es el id de la div creado en el paso 2.

4 Guarde el documento y abrirlo en su navegador. Aparece la partida dentro del DIV. Haga clic y arrastre el encabezamiento de cualquier lugar de la página web.

Consejos y advertencias

• Para que se pueda arrastrar cualquier DIV, darle un valor identificador único, como se muestra en estos pasos, y el uso que id en la función de JavaScript. En este ejemplo se utiliza un elemento de párrafo dentro del DIV. Coloque lo que quiera dentro del bloque DIV. Añadir una imagen o incluso un vídeo, por ejemplo, y los visitantes del sitio podrán cambiar la posición de los elementos, así haciendo clic y arrastrando.
• A pesar de que se agrega sólo una declaración a su función de JavaScript, se necesitan varios archivos JavaScript para producir este efecto. Google recibe estos archivos JQuery gratis. Al vincular a ellos en lugar de mantener los archivos en el servidor, que siempre tiene el código más reciente jQuery disponible. Los exploradores también caché de estos archivos. Esto puede hacer que sus páginas cargar un poco más rápido si los visitantes del sitio ya tienen copias de los archivos guardados en JQuery sus navegadores.