Recientemente, vi a algunos amigos en Internet buscando implementaciones de arrastrar y soltar similares a la página de inicio personalizada de Google y el espacio MSN, y encontré un ejemplo a continuación, pero lo reescribí y mejoré y establecí un general. función La implementación de la función específica es la siguiente:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Demostración de arrastrar y soltar de BlackSoul</title. >
<!- -
____________________________________
|--------Autor por BlackSoul---------
|-----------2006.03.30------ ---- ----|
|[email protected] ------ |
------------QQ:9136194---- ---- ------|
|------http://blacksoul.cnblogs.cn---|
=================== ==== ===============
-->
<tipo de estilo="text/css">
cuerpo
{
margen:0px
}
#aim /*Establecer el estilo de la capa de destino*/
{
position:absolute;/*Estilo necesario para controlar la posición de la capa*/
width
:200px
height:30px
border:1px solid #666666;
;
}
#sourceLayer, #cloneLayer
{
position:absolute;/*Estilo necesario para controlar la posición de la capa*/
width
:300px;
height
:50px;
border:1px solid #666666
;
.acoplado
{
pantalla:ninguno;
filtro:alfa(opacidad=100)
;
.actived
{
display:bloque;
filtro:alfa(opacidad=
70);
</estilo>
</head>
<cuerpo>
<div id="aim">Rango de ubicación</div>
<div id="sourceLayer" unselectable="off"><img src="
<div id="cloneLayer" class="acoplado" unselectable="off"> </div>
<script type="text/javascript" language="javascript">
<!--
/*
============================== =======
|--------Autor por BlackSoul--------- |
-----------2006.03.30----- ---------
-----------|
|------http://blacksoul.cnblogs.cn---|
================== ==================
*/
//Establece el objeto de capa
var
aim
;
//
Definir
la posición inicial de cada capa
var aimX
;
//Variables durante el arrastre
var draging = false; //Si se está arrastrando
var offsetX = 0; //Los desplazamientos izquierdo y derecho en la dirección X
var offsetY = 0 //Los desplazamientos hacia arriba y hacia abajo en la dirección Y
var; back; / /Devolver objeto de animación
var thisX; //Posición X de la capa clonada actual
var thisY; //Posición Y de la capa clonada actual
varstepX
; //Velocidad de desplazamiento
var stepY;
//Inicializa la información de arrastre
/*
initAimX objetivo x coordenada
initAimY objetivo y coordenada
initOrgnX arrastre origen x coordenada
initOrgnY arrastre origen y coordenada
*/
//Obtener el objeto de capa
función getLayer(inAim,inSource,inClone)
{
objetivo = document.getElementById(inAim);
sourceLayer = document.getElementById(inSource);
cloneLayer
= document.getElementById(inClone);
function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
aimX = initAimX
;
aimY
= initAimY; initOrgnX = initOrgnY
//Establece la posición de cada capa inicial
aim.style.pixelLeft =
aimX.style.pixelTop
;=
aimY;
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY;
cloneLayer.style.pixelLeft = orgnX
;
//Preparar la
función de arrastre BeforeDrag()
{
if (event.button != 1)
{
return
}
cloneLayer.innerHTML = sourceLayer.innerHTML //Copiar el contenido de la fuente de arrastre
offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;
offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;
cloneLayer.className = "activado
"
;
//
Función de arrastre OnDrag()
{
if(!dragging)
{
return
}
//Actualizar posición
event.returnValue = false;
cloneLayer.style.pixelLeft
= document.body.scrollLeft + event.clientX - offsetX;
= document.body.scrollTop + event.clientY - offsetY
}
//Finalizar
la función de arrastre EndDrag()
{
if (event.button!= 1)
{
return
}
arrastrando = false;
if (event.clientX >= aim.style.pixelLeft && event.clientX <= (aim.style.pixelLeft + aim.offsetWidth) &&
event.clientY >= aim.style.pixelTop && event.clientY <= (aim.style .pixelTop + aim.offsetHeight))
{
//La capa de arrastre se ubica en el objetivo y se coloca automáticamente en la posición de destino
sourceLayer.style.pixelLeft = aim.style.pixelLeft;
sourceLayer.style.pixelTop = aim.style.pixelTop;
cloneLayer.className = "acoplado";
/*
** Después de completar esto, puede usar xml para guardar la posición actual
** La próxima vez que el usuario ingrese
, la capa de arrastre de origen se inicializará con los datos en xml
*/
}
else
{
// Arrastrar y soltar Ubicado fuera de la capa de destino, restaura la posición de origen del arrastre
thisX=
cloneLayer.style.pixelLeft
thisY = cloneLayer.style.pixelTop;
offSetX = Math.abs(thisX - orgnX);
(thisY - orgnY);
tiempo = 500;//Establecer el tiempo de animación
stepX
= Math.floor((offSetX/time)*20)
;
0)
pasoX = 2
si (pasoY == 0)
pasoY = 2;
//Inicia la animación de retorno
moveStart(
)
;
función moverInicio()
{
atrás = setInterval("MoveLayer();", 15)
;
//Establece la
función del efecto de animación devuelto MoveLayer()
{
//Ubicado en el lado superior izquierdo del objetivo
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style .pixelTop += stepY;
// Si el desplazamiento excede el objetivo, establezca la velocidad en pix y retroceda en la dirección opuesta. Aquí se logra el mismo efecto que
if(cloneLayer.style. pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1
}
// Si las coordenadas en el eje X o Y son las mismas, no se producirá ningún desplazamiento
if(cloneLayer.style .pixelLeft == orgnX)
{
pasoX = 0
}
if(cloneLayer .style.pixelTop == orgnY)
{
pasoY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
Movimiento final();
}
}
//Ubicado en la parte inferior izquierda del objetivo
else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft += stepX;
cloneLayer.style.pixelTop -= stepY;
if(cloneLayer.style.pixelLeft > orgnX)
{
pasoX = 1
}
if(cloneLayer.style.pixelTop<
orgnY)
{
pasoY = 1
}
if(cloneLayer.style.pixelLeft == orgnX)
{
pasoX = 0
;
(cloneLayer.style. pixelTop == orgnY)
{
pasoY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
}
//Ubicado en el lado superior derecho del objetivo
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft -= stepX;
cloneLayer.style.pixelTop += stepY; ;
if(
cloneLayer.style.pixelLeft < orgnX)
{
pasoX
=
1
}
if(cloneLayer.style.pixelTop > orgnY)
{
pasoY
= 1
;
if(cloneLayer.style. pixelTop == orgnY)
{
pasoY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
}
//Ubicado en el lado superior derecho del objetivo
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft -= stepX
;
;
if(
cloneLayer.style.pixelLeft < orgnX)
{
pasoX
= 1
}
if(cloneLayer.style.pixelTop
<
orgnY)
{
pasoY
= 1;
if(cloneLayer.style. pixelTop == orgnY)
{
pasoY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
}
//alcanza el objetivo
else
{
EndMove(
)
;
// Detener
la función de retorno de animación EndMove()
{
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY
;
cloneLayer.style.pixelLeft = orgnX;
cloneLayer.style.pixelTop = orgnY;
borrarIntervalo(atrás)
;
// Función de arrastre principal
startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)
{
getLayer(inAim,inSource,inClone)
initDrag
(initAimX,initAimY,initOrgnX,initOrgnY);
sourceLayer.onmousedown = BeforeDrag;
onmousemove = OnDrag; //Si se usa cloneLayer aquí, el contenido de cloneLayer se seleccionará durante el arrastre y aparecerán algunos errores...
cloneLayer.onmouseup = EndDrag
}
//Llamar
a startDraging("aim","sourceLayer","cloneLayer",300,200,20,20);
//-->
</script>
</body>
</html>
Cabe señalar que:
1. Debe haber tres definiciones de div en HTML. La posición del estilo debe definirse como absoluta en las tres capas para controlar la posición.
1. Capa de destino (objetivo), su función principal es definir la posición donde tiene efecto el arrastre.
2. Arrastre la fuente (sourceLayer). Preste atención a configurar el atributo no seleccionable = "off" (esto es extraño, configurarlo en el rango activado seleccionará el contenido de la capa durante el proceso de arrastre).
3. La capa utilizada para copiar (cloneLayer).
2. Llamada a función
Explicación del parámetro startDraging:
initAim nombre de la capa de destino initSource nombre de la fuente de arrastre initClone nombre de la capa utilizada para copiar
initAimX La coordenada del eje x de la capa de destino initAimY La coordenada del eje y de la capa de destino initOrgnX La coordenada x de la fuente de arrastre initOrgnY La coordenada del eje Y de la fuente de arrastre
solo se prueba en IE Se han agregado comentarios a. el código. Puede agregar la operación de escribir xml después de que la fuente de arrastre llegue al destino. Y luego registrar los datos del diseño de página definido por el usuario. No estoy muy satisfecho con el algoritmo de devolución de animación. Algunas sugerencias para mejorar. Actualmente estoy trabajando en el desarrollo de un conjunto de controles ajax basados en asp.net2.0. Espero que tengas más comunicación.
P.D.: el primer artículo en mi jardín de blogs. .