Drag and drop de capas en páginas web
Cada día internet está mas llena de aplicaciones web que de documentos. El objetivo de un documento es mostrar información, mientras que en una aplicación se le debe añadir cierta interactividad.
Mover capas como si se tratara de las ventanas del sistema operativo es algo que nos puede aportar cierta vistosidad a nuestra página web, claro, que tampoco se debería abusar de ello. Con unas simples modificaciones en el diseño y un pequeño script, podremos crear este efecto.
Las ventanas se crean mediante elementos DIV (con posicionamiento absoluto), el cual, a parte del contenido, deberá tener una barra que sea la que usemos para mover la ventana:
CONTENIDO
<div style="position: absolute; ...">
<div style="width: 100%; height: 20px; ..."></div>
<!-- CONTENIDO -->
</div>El método para mover una ventana es sencillo: en el body se captura el evento onmousemove, el cual controlará el movimiento de la capa que se haya seleccionado. Mientras se mueva el ratón por el body, se moverá la capa según la posición del ratón. Este movimiento solo se llevará a cabo cuando se haya producido el evento onmousedown en la barra de la capa, en ese momento es cuando se almacena en una variable la ventana que se debe mover. Cuando se produce el evento onmouseup se vacia la variable, parando así el movimiento.
¿Por qué se tiene que capturar el evento onmousemove en el body y no en la barra de la capa?: debido al usuario. El usuario nunca va a mover el ratón de forma suave, sino que puede realizar movimientos bruscos del ratón, en ese caso el ratón dejaría de estar dentro de la barra, por lo que el evento onmousemove no se produciría. Por ello se captura en el body, porque el ratón siempre se moverá dentro de él, por lo que si el ratón se sale de la barra, continuará el movimiento.
Las modicifaciones que se deben producir en la capa y en el body son las siguientes:
<div style="position: absolute; ...">
<div style="width: 100%; height: 20px; ..."
onmousedown="clickCapa(event, this)" onmouseup="liberaCapa()"
></div>
<!-- CONTENIDO -->
</div><body onmousemove="mueveCapa(event)">El script que realiza el moviento consta de tres partes, capturar el moviemiento del ratón y mover la capa, almacenar la capa que se va a mover y liberar la capa del movimiento:
var capa = null; // Almacena la capa que se mueve
var _IE_ = navigator.userAgent.indexOf("MSIE") != -1; // Si es IE
/*
* Libera la capa del movimiento
*/
function liberaCapa() {
capa = null;
}
/*
* Cuando se pincha en la barra de la capa
* se almacena la capa y se guarda la posición
* del ratón respecto a la esquina superior
* izquierda de la capa, para así mover la capa
* desde el punto pichado y no desde la equina
*/
function clickCapa(e, obj) {
capa = obj.parentNode;
// En IE y Opera se usa otra propiedad del evento
if (_IE_) {
difX = e.offsetX;
difY = e.offsetY;
} else {
difX = e.layerX;
difY = e.layerY;
}
}
/*
* Mientras se mueva el ratón por el
* body se mueve la capa
*/
function mueveCapa(e) {
if (capa != null) {
capa.style.top = (e.clientY-difY)+"px";
capa.style.left = (e.clientX-difX)+"px";
}
}
