Recentemente, vi alguns amigos na Internet procurando implementações de arrastar e soltar semelhantes à página inicial personalizada do Google e ao espaço do MSN, e encontrei um exemplo abaixo, mas houve muitos problemas que o reescrevi e melhorei e estabeleci. função A implementação específica da função é a seguinte:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Demonstração de arrastar e soltar do BlackSoul</title. >
<!- -
____________________________________
|--------Autor Por BlackSoul--------
|------------2006.03.30------ ---- ----
|[email protected] ------|
------------QQ:9136194---- ---- ------|
|------http://blacksoul.cnblogs.cn---|
=================== ==== ===============
-->
<style type="text/css">
corpo
{
margin:0px
}
;
#aim /*Definir o estilo da camada alvo*/
{
position:
absolute;/*Estilo necessário para controlar a posição da camada*/
width:200px
height:30px
border:1px solid #666666;
;
#sourceLayer, #cloneLayer
{
position:
absolute;/*Estilo necessário para controlar a posição da camada*/
width
:300px
height:50px
border:1px solid #666666
;
.docked
{
display:none;
filtro:alfa(opacidade=100
}
);
.ativou
{
display: bloco;
filtro: alfa (opacidade = 70
}
</style>
</head>
);
<corpo>
<div id="aim">Intervalo de posicionamento</div>
<div id="sourceLayer" unselectable="off"><img src="
<div id="cloneLayer" class="docked" unselectable="off"> </div>
<script type="text/javascript" idioma="javascript">
<!--
/*
============================== =======
|-------Autor Por BlackSoul--------
|------------2006.03.30----- ---------|[email protected]
|------------QQ:9136194--- -----------|
|------http://blacksoul.cnblogs.cn---
| =================
*/
//Definir o objeto da camada
var
aim
;
//Define a posição inicial de cada camada
var aimX;
var
aimY
;
//Variáveis durante o arrastamento
var draging = false; //Se está sendo arrastado
var offsetX = 0; //Os deslocamentos para a esquerda e para a direita na direção X
var
offsetY = 0;
back; //Retorna o objeto de animação
var thisX; //Posição X da camada clone atual
var thisY; //Posição
Y
da camada clone atual
var time;
//Inicializa informações de arrastar
/*
initAimX destino x coordenada
initAimY destino y coordenada
initOrgnX arrastar origem x coordenada
initOrgnY arrastar origem y coordenada
*/
//Obter o objeto da camada
função getLayer (inAim, inSource, inClone)
{
objetivo = document.getElementById (inAim);
sourceLayer
=
document.getElementById (inSource);
function initDrag(initAimX,initAimY
,
initOrgnX,initOrgnY)
{
aimX
=
initAimX;
aimY
= initAimY
;
=
aimY;
sourceLayer.style.pixelLeft = orgnX
;
sourceLayer.style.pixelTop
= orgnY;
//Prepare a
função de arrastar BeforeDrag()
{
if (event.button != 1)
{
return
}
cloneLayer.innerHTML = sourceLayer.innerHTML - //Copiar o conteúdo de origem do arrasto
offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;
offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;
cloneLayer.className = "arrastando"
= true
;
//
Função de arrastar OnDrag()
{
if(!dragging)
{
return
}
//Atualizar posição
event.returnValue = false;
cloneLayer.style.pixelLeft = document.body.scrollLeft + event.clientX -
cloneLayer.style .pixelTop
;=document.body.scrollTop + event.clientY - offsetY
}
;
//Fim
da função de arrastar EndDrag()
{
if (event.button != 1)
{
return
}
draging = 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))
{
//A camada de arrastar está localizada no destino e posicionada automaticamente na posição de destino
sourceLayer.style.pixelLeft = aim.style.pixelLeft;
sourceLayer.style.pixelTop = aim.style.pixelTop;
cloneLayer.className = "docked";
/*
** Depois de concluir isso, você pode usar xml para salvar a posição atual
** Na próxima vez que o usuário entrar
, a camada de arrasto de origem será inicializada com os dados em xml
*/
}
else
{
//Arrastar e soltar Localizado fora da camada de destino, restaura a posição de origem do arrasto
thisX = cloneLayer.style.pixelLeft;
thisY
= cloneLayer.style.pixelTop
= Math.abs(thisX - orgnX);
(thisY - orgnY);
time = 500;//Definir tempo de animação
stepX = Math.floor((offSetX/time)*20
)
;
0)
passoX = 2
se (passoY == 0)
passoY = 2;
//Iniciar a animação de retorno
moveStart(
)
;
function moveStart()
{
voltar = setInterval("MoveLayer();",15 })
;
//Definir o efeito de animação retornado
function MoveLayer()
{
//Localizado no lado superior esquerdo do alvo
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style
.pixelTop += stepY;
//Se o deslocamento exceder o alvo, defina a velocidade para pix e volte na direção oposta. Um efeito de mola é obtido aqui.
pixelLeft > orgnX)
{
stepX = 1
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1
}
//Se as coordenadas no eixo X ou Y forem iguais, nenhum deslocamento ocorrerá
if(cloneLayer.style .pixelLeft == orgnX)
{
stepX
= 0
}
if
(
cloneLayer .style.pixelTop == orgnY)
{
stepY = 0;
EndMove();
}
}
//Localizado no canto inferior esquerdo do alvo
else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft +=
cloneLayer.style.pixelTop -= stepY;
if
(
cloneLayer.style
.pixelLeft
>
orgnX
)
{
stepX
=
1
;
(cloneLayer.style. pixelTop == orgnY)
{
stepY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove()
}
}
//Localizado no lado superior direito do alvo
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft -=
cloneLayer.style.pixelTop += stepY
;;
if
(
cloneLayer.style
.pixelLeft
<
orgnX
)
{
stepX
=
1
;
if(cloneLayer.style. pixelTop == orgnY)
{
stepY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove
()
;
//Localizado no lado superior direito do alvo
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft -=
cloneLayer.style.pixelTop -= stepY
;;
if
(
cloneLayer.style
.pixelLeft
<
orgnX
)
{
stepX
=
1
;
if(cloneLayer.style. pixelTop == orgnY)
{
stepY = 0
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove
()
;
//alcança o alvo
else
{
EndMove()
}
}
//Parar
a função de retorno de animação EndMove()
{
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY
;
cloneLayer.style.pixelLeft = orgnX;
cloneLayer.style.pixelTop = orgnY;
clearInterval(voltar)
;
// Função de arrastar principal function
startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)
{
getLayer(inAim,inSource,inClone)
initDrag(initAimX,initAimY,initOrgnX,initOrgnY);
sourceLayer.onmousedown = BeforeDrag
document . onmousemove = OnDrag; //Se cloneLayer for usado aqui, o conteúdo em cloneLayer será selecionado durante o arrastamento e alguns bugs aparecerão...
cloneLayer.onmouseup = EndDrag
}
;
//Chamar
startDraging("aim","sourceLayer","cloneLayer",300,200,20,20);
//-->
</script>
</body>
</html>
Deve-se observar que:
1. É necessário haver três definições de div em HTML. A posição do estilo deve ser definida como absoluta em todas as três camadas para controlar a posição.
1. Camada alvo (objetivo), sua principal função é definir a posição onde o arrasto entra em vigor.
2. Arraste a fonte (sourceLayer). Preste atenção ao definir o atributo unselectable = "off" (isso é estranho, configurá-lo para o intervalo selecionado selecionará o conteúdo da camada durante o processo de arrastar)
3. A camada usada para copiar (cloneLayer).
2. Chamada de função
Explicação do parâmetro startDraging:
initAim nome da camada de destino initSource arraste o nome da fonte initClone nome da camada usada para copiar
initAimX A coordenada do eixo x da camada de destino initAimY A coordenada do eixo y da camada de destino initOrgnX A coordenada x da origem do arrasto initOrgnY A coordenada do eixo Y da origem do arrasto
é testada apenas no IE. Comentários foram adicionados a. o código. Você pode adicionar a operação de escrever xml depois que a origem do arrasto atingir o destino. E então registrar os dados do layout da página definido pelo usuário. Não estou muito satisfeito com o algoritmo de retorno da animação. algumas sugestões para melhorias. Atualmente estou trabalhando no desenvolvimento de um conjunto de controles ajax baseados em asp.net2.0. Espero que você tenha mais Comunicado.
ps: O primeiro artigo no meu blog, espero que você possa me apoiar muito. .