Hola.
Hoy vamos a ver un pequeño tutorial que nos
permita ver un poco por encima como trabajar con objetos “Drag&Drop” usando las librerías que
JQuery nos proporciona.
Para ello, lo primero que vamos a hacer es
crear un proyecto vacío en el que hacer nuestras
pruebas.
Una vez creado el proyecto y agregada nuestra
página vacía, agregaremos al proyecto los scripts de jquery y jquery-ui que
vamos a necesitar. Para ello podemos descargarlos directamente de la página de
JQuery o bien instalarlos mediante Nuget.
Con los scripts agregados, lo siguiente que
haremos es agregar la referencia a nuestra página de
pruebas.
|
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.min.js"></script>
</head>
|
Ya tenemos nuestra página lista para ser
desarrollada.
Vamos a crear dos “div”, uno que
representara el objeto que vamos a arrastrar y otro que es la zona donde vamos a
depositar el div arrastrado. Dentro de
cada div vamos a poner una etiqueta que usaremos para mostrar diferentes
mensajes.
|
<div id="dragable1" class="div_dragable" style="height: 100px; width: 100px; background-color: #B5B5FF;
border: 1px
solid #7272A0; left: 100px;">
<label
id="etiqueta_drag" />
</div>
<div id="dropable" style="border: 1px solid #824F8E;
background-color: #EA8EFF; width: 300px; height: 250px; top: 300px; left: 400px;">
<label
id="etiqueta_drop" />
</div>
|
Le damos un poco de forma a los “div”
definiendo en su style (también podéis ponerlo en un fichero
css).
Bueno ya tenemos nuestro entorno de pruebas
preparado. Vamos a trabajar.
Lo primero que haremos al cargar la página es
declarar nuestro div “dragable” por medio del siguiente
código
|
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.20.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div#dragable1').draggable();
}
);
</script>
</head>
|
Ya podemos arrastrar nuestro div por toda la
pantalla….a que es fácil.
Ahora vamos a experimentar un poco con los
eventos que tenemos disponibles sobre los objetos
“draggable”.
Básicamente nos centraremos en los siguientes tres
eventos
-
start(dragstart) à Se lanza en el momento en que iniciamos la acción de arrastrar un elemento “draggable”.
-
dragà Se lanza mientras estamos arrastrando un elemento “draggable”
-
stop(dragstop) à Se lanza en el momento en que dejamos de arrastrar un elemento “draggable”.
A continuación vamos a ver como implementamos
estos eventos.
Para ello vamos a modificar el código en el que
declarábamos nuestro div
“draggable”:
|
<script type="text/javascript">
$(document).ready(function () {
$('div#dragable1').draggable();
$('div#dragable1')
.bind('dragstart', function (event) {
if
(!$(event.target).is('.div_dragable')) return false;
$(this).css('background-color',
'#FFF07F');
$('label#etiqueta_drag').text('Drag
start.');
})
.bind('drag', function (event) {
$(this).css('box-shadow', '10px 10px 10px #080808');
$('label#etiqueta_drag').text('Dragging.');
})
.bind('dragstop', function (event) {
$(this).css('box-shadow', '0px 0px 0px #080808');
$(this).css('background-color',
'#7BFF47');
$('label#etiqueta_drag').text('Drag ends.');
});
}
);
</script>
|
Además hemos implementado el evento
“drag”, para que mientras estamos arrastrando el div este se muestro
con un efecto de sombreado.
Finalmente hemos implementado el evento
“dragstop” para quitar el efecto de sombra y volver a cambiar el color
de div.
Además de estos efectos, en cada evento hemos
modificado el texto de la etiqueta del div, para tener más claro en qué
orden se ejecutan los eventos.
Ya para finalizar, vamos a agregar información
al elemento arrastrable
Ahora vamos a ver cómo trabajar con los
elementos que permites soltar elementos.
Al igual que hicimos con el div
“draggable”, vamos a declarar el segundo div como
“droppable”.
|
$('div#droppable').droppable();
|
Vamos a ver algunos de los eventos que podemos
implementar sobre objetos
“droppable”.
-
drop à Este evento se lanza en el momento en que soltamos un elemento sobre el elemento “droppable”.
-
out(dropout) à Este evento se lanza mientras se esté arrastrando un elemento y ese se encuentre fuera de la zona del elemento “droppable”.
-
over(dropover) à Este evento se lanza mientras se está arrastrando un elemento y este se encuentra sobre la zona del elemento “droppable”.
Ahora que ya hemos visto los eventos, vamos a
implementar el siguiente código
|
$('#dropable')
.bind('drop', function () {
$('#etiqueta_drop').text('Elemento
soltado.');
})
.bind('dropout', function () {
$('#etiqueta_drop').text('Elemento fuera de div
droppable.');
})
.bind('dropover', function () {
$('#etiqueta_drop').text('Elemento sobre div
droppable.');
});
|
Podeis descargaros el proyecto desde el siguiente
enlace:
Hasta aquí este pequeño tutorial de
“Drag&Drop” usando JQuery.
Espero que os haya resultado
útil.
No hay comentarios:
Publicar un comentario