|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Caja arrastrable
por Luciano Moreno, del departamento de diseño web de BJS Software.
Vamos a ver ahora cómo se crea una caja mediante una capa, caja que va a poseer la facultad de que se puede arrastrar por la ventana del navegador con el ratón.
Es una caja que puede resultar muy útil, ya que podemos crear cuantas deseemos en una página, ofreciendo con ello al usuario una forma de presentación de datos que él puede distribuirse por la ventana, situando las diferentes cajas donde guste, lo que le puede permitir comparar los contenidos de dos o más cajas.
Es un script cross-browser, es decir, compatible con todos los navegadores de cuarta generación.
Para la construcción de caja vamos a usar una capa padre, dentro de la cual situaremos una tabla que usamos para formatear la presentación. El tema de mayor dificultad en éste script es la captura de eventos, sobre todo en el caso de Nestcape Navigator 6x.
No voy a entrar en muchas explicaciones. Digamos que éste es un script para usuarios avanzados si deseáis profundizar en él, aunque nada impide un uso realtivamente fácil del mismo a cualquiera.
El código necesario para la página es el siguiente:
<html>
<head>
<style type="text/css">
#caja1{border: 2pxsolid
red}
</style>
<script language="JavaScript">
var permisoN4=0;
var
leftN4;
var
topN4;
var
idCapa;
var
idCapax;
var
idCapay;
/**
* funciones para manejar
eventos de raton en Nestcape 4x
*/
function capturaN4(e)
{
idCapa.captureEvents(Event.MOUSEMOVE)
leftN4=e.x
topN4=e.y
}
/**
* funciones para arrastrar la
capa en Nestcape 4x
*/
function
arrastraN4(e)
{
if
(permisoN4==1)
{
idCapa.moveBy(e.x-leftN4,e.y-topN4)
return
false
}
}
/**
* funcion para detener la
captura de los eventos de raton
*/
function
paraN4()
{
idCapa.releaseEvents(Event.MOUSEMOVE)
}
/**
* funciones y variables para
manejar eventos de raton en Internet Explorer y mover la
capa
*/
var permisoIE=false
function
arrastraIE(id)
{
if
(permisoIE==true)
{
document.all[id].style.pixelLeft=idCapax+event.clientX-iex
document.all[id].style.pixelTop=idCapay+event.clientY-iey
return
false
}
}
var permisoN6=false
function
arrastraN6(e)
{
if
(permisoN6==true)
{
idCapa.style.left=idCapax+e.clientX-n6x+"px"
idCapa.style.top=idCapay+e.clientY-n6y+"px"
return
false
}
}
function
paramN6(e)
{
n6x=e.clientX
;
n6y=e.clientY;
idCapa.addEventListener("mousemove", arrastraN6,
false);
}
function
inicializa(id)
{
if(document.all)
{
iex=event.clientX
iey=event.clientY
idCapax=document.all[id].style.pixelLeft
idCapay=document.all[id].style.pixelTop
permisoIE=true
arrastraIE('caja1');
}
else
if(document.layers)
{
idCapa=eval(id);
idCapa.captureEvents(Event.MOUSEDOWN |
Event.MOUSEUP);
idCapa.onmousedown=capturaN4;
idCapa.onmousemove=arrastraN4;
idCapa.onmouseup=paraN4;
}
else
if(document.getElementById)
{
idCapa =
document.getElementById(id);
idCapa.addEventListener("mousedown", paramN6,
false);
idCapax=parseInt(document.getElementById(id).style.left);
idCapay=parseInt(document.getElementById(id).style.top);
permisoN6=true
}
}
/**
* funcion para esconder la
capa
*/
function
esconde(id)
{
if
(document.all)
document.all[id].style.visibility="hidden"
else if
(document.layers)
document.layers[id].visibility="hide"
else if
(document.getElementById)
document.getElementById(id).style.visibility="hidden"
}
</script>
</head>
<bodyonmouseMove="arrastraIE('caja1')"onmouseup="permisoIE=false;permisoN6=false">
<div id="caja1"
style="position:absolute;width:250px;left:50px;top:50px;padding:0px;margin:0px;border-width:2px;">
<table border="0" width="250" cellspacing="0" cellpadding="0" class="caja"
style="margin:0px;">
<tr>
<td width="100%"
valign="top">
<table
border="0" width="100%" cellspacing="0"
cellpadding="0">
<tr
bgcolor="red">
<td onMousedown="inicializa('caja1');" style="cursor:hand;" width="95%"
height="22">
<ilayer width="100%"
left="0">
<layer width= "100%"onMouseover="permisoN4=
1;inicializa(caja1)"onMouseout="permisoN4=0">
<font face="Verdana"
color="#FFFFFF"><strong><smallLa Vida es
Sueño</small></strong></font>
</layer>
</ilayer>
</td>
<td style="cursor:hand"
align="center">
<a href="#" onClick="esconde('caja1');return false">
<img
src="close.gif" width="16" height="16" border="0"
alt="cerrar">
</a>
</td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF"
colspan="2">
<font face="Verdana"
size="2">
Cuentan de un sabio que un
día,<br>
tan pobre y mísero
estaba,<br>
que sólo se
sustentaba<br>
de unas yerbas que
cogía.<br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Consideraciones:
1) Aplicamos diferente sintaxis de código para cada navegador, ya que cada uno de ellos maneja las capas de forma diferente. Para más información, ver diferentes artículos de DHTML en este mismo portal.
2) Debemos capturar los eventos MOUSEDOWN, MOUSEUP y MOUSEMOVE tanto para Nestcape 4x como para Nestcape 6x, siendo la forma de hacerlo diferente en cada uno de ellos. Para más información, os recomiendo visitar la sección sobre JavaScript en www.webreference.com
3) El esquema general de funcionamiento es: capturamos los eventos en los dos Navigator, usando en las versiones 4x los eventos onmousedown y onmouseout situados en un conjunto layer - ilayer, ya que éste navegador no admite éstos eventos ni en tablas ni en capas creadas con DIV o SPAN. Con éstos eventos controlamos cuando el usuario pincha y despincha con su ratón en la parte superior de la caja, con lo que podemos arrancar o finalizar el efecto de arrastre, que controlamos con el evento onmousemove.
El resultado de este código podéis verlo pinchando aquí.
Eso es todo, amigos. Si tenéis alguna duda, escribidnos.