Récemment, j'ai vu des amis sur Internet à la recherche d'implémentations glisser-déposer similaires à la page d'accueil personnalisée de Google et à l'espace MSN, et j'ai trouvé un exemple ci-dessous. Mais il y a eu de nombreux problèmes, je l'ai réécrit et amélioré et j'ai établi un général. L'implémentation spécifique de la fonction est la suivante :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Démo glisser-déposer de BlackSoul</title. >
<!- -
____________________________________
|--------Auteur par BlackSoul---------
|------------2006.03.30------ ---- ----|
|[email protected] ------||
------------QQ:9136194---- ---- ------|
|------http://blacksoul.cnblogs.cn---|
================== ==== ===============
-->
<style type="text/css">
corps
{
margin:0px
}
#aim /*Définir le style du calque cible*/
{
position:
absolute;/*Style nécessaire pour contrôler la position du calque*/
width:200px
height:30px
;
;
}
#sourceLayer, #cloneLayer
{
position:absolute;/*Style nécessairepour
contrôler laposition
du calque*/
width:300px
height:50px;
border:1px solid #666666
;
.docked
{
display:aucun;
filtre:alpha(opacité=100
}
);
.actived
{
display:block;
filtre:alpha(opacity=70
}
</style>
</head>
<corps>
<div id="aim">Plage de placement</div>
<div id="sourceLayer" unselectable="off"><img src="
<div id="cloneLayer" class="doked" unselectable="off"> </div>
<script type="text/javascript" langage="javascript">
<!--
/*
============================= =======
|--------Auteur par BlackSoul--------- |
------------2006.03.30----- ---------|
|[email protected] ------|
|------------QQ:9136194--- -----------|
|------http://blacksoul.cnblogs.cn---|
================= ==================
*/
//Définit l'objet de couche
var aim;
var
sourceLayer;
//Définit la position initiale de chaque couche
var aimX;
var aimY;
var
orgnX;
//Variables lors du déplacement
var draging = false; //S'il est déplacé
var offsetX = 0; //Les décalages gauche et droit dans la direction X
var offsetY = 0; //Les décalages vers le haut et vers le bas dans la direction Y
var back; / /Retour de l'objet d'animation
var thisX; //Position X du calque clone actuel
var thisY; //Position Y du calque clone actuel
var time;
//Vitesse de déplacement
var stepY;
//Initialiser les informations de déplacement
/*
initAimX cible x coordonnée
initAimY cible y coordonnée
initOrgnX source de déplacement coordonnée x
initOrgnY source de déplacement coordonnée y
*/
//Obtenir l'objet calque
function getLayer(inAim,inSource,inClone)
{
objectif = document.getElementById(
inAim); sourceLayer
=
document.getElementById(inSource);
function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
aimX =
initAimX
; aimY = initAimY;
orgnX = initOrgnX;
//Définir la position de chaque calque de départ
aim.style.pixelLeft
= aimX;
=
aimY;
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop
=
orgnY;
//Préparez la
fonction de glisser BeforeDrag()
{
if (event.button != 1)
{
return;
}
cloneLayer.innerHTML = sourceLayer.innerHTML; // Copiez le contenu de la source de glisser
offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;
offsetY = document.body.scrollTop + event.clientY - sourceLayer.style.pixelTop;
cloneLayer.className = "actived
"
;
//
Fonction de déplacement OnDrag()
{
if(!dragging)
{
return;
}
//Mettre à jour la position
event.returnValue = false;
cloneLayer.style.pixelLeft = document.body.scrollLeft + event.clientX -
cloneLayer.style .pixelTop
;= document.body.scrollTop + event.clientY - offsetY
}
//Fin du glissement de
la fonction 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))
{
//Le calque de déplacement est situé dans la cible et automatiquement positionné à la position cible
sourceLayer.style.pixelLeft = aim.style.pixelLeft;
sourceLayer.style.pixelTop = aim.style.pixelTop;
cloneLayer.className = "docked";
/*
** Après avoir terminé cela, vous pouvez utiliser XML pour enregistrer la position actuelle
** La prochaine fois que l'utilisateur entrera
, le calque de déplacement source sera initialisé avec les données en XML
*/
}
else
{
//Glisser et déposer Situé à l'extérieur du calque cible, restaurez la position de la source de déplacement
thisX = cloneLayer.style.pixelLeft;
thisY = cloneLayer.style.pixelTop;
offSetX = Math.abs(thisX -
offSetY = Math.abs
);(thisY - orgnY);
time = 500;//Définir le pas de temps de l'animationX
= Math.floor((offSetX/time)*20);
stepY = Math.floor((offSetY/time)*20)
; 0)
étapeX = 2
si (étapeY == 0)
étapeY = 2 ;
//Démarre l'animation de retour
moveStart(
)
;
function moveStart()
{
retour = setInterval("MoveLayer();",15 })
;
//Définit la
fonction d'effet d'animation renvoyée MoveLayer()
{
//Situé en haut à gauche de la cible
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style
.pixelTop += stepY;
//Si le déplacement dépasse la cible, définissez la vitesse sur pix et reculez dans la direction opposée. Un effet de ressort est obtenu ici.
pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1;
}
//Si les coordonnées sur l'axe X ou Y sont les mêmes, aucun déplacement ne se produira
if(cloneLayer.style .pixelLeft == orgnX)
{
stepX = 0;
}
if(cloneLayer .style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
FinDéplacer();
}
}
//Situé en bas à gauche de la cible
else if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft += stepX;
cloneLayer.style.pixelTop -= stepY;
if(cloneLayer.style .pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop<
orgnY
)
{
stepY = 1
}
if(cloneLayer.style.pixelLeft == orgnX)
{
stepX = 0;
(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop==
orgnY)
{
EndMove()
;
//Situé en haut à droite de la cible
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft -= stepX;
cloneLayer.style.pixelTop += stepY ;
if(cloneLayer.style .pixelLeft < orgnX)
{
stepX
= 1;
}
if
(cloneLayer.style.pixelTop
> orgnY)
{
stepY
=
1;
if(cloneLayer.style. pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove
()
;
//Situé en haut à droite de la cible
else if(cloneLayer.style.pixelLeft >= orgnX && cloneLayer.style.pixelTop >= orgnY)
{
cloneLayer.style.pixelLeft -= stepX;
cloneLayer.style.pixelTop -= stepY ;
if(cloneLayer.style .pixelLeft < orgnX)
{
stepX
= 1;
}
if
(
cloneLayer.style.pixelTop < orgnY)
{
stepY
=
1;
if(cloneLayer.style. pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove
()
;
//atteindre la cible
sinon
{
EndMove();
}
}
//Arrêtez
la fonction d'animation de retour EndMove()
{
sourceLayer.style.pixelLeft = orgnX;
sourceLayer.style.pixelTop = orgnY
;
cloneLayer.style.pixelLeft = orgnX;
cloneLayer.style.pixelTop = orgnY;
clearInterval
(retour);
// Fonction de déplacement principal
function startDraging(inAim,inSource,inClone,initAimX,initAimY,initOrgnX,initOrgnY)
{
getLayer
(inAim,inSource,inClone)
initDrag(initAimX,initAimY,initOrgnX,initOrgnY
sourceLayer.onmousedown = BeforeDrag;
onmousemove = OnDrag; //Si cloneLayer est utilisé ici, le contenu de cloneLayer sera sélectionné lors du glisser, et certains bugs apparaîtront...
cloneLayer.onmouseup = EndDrag
}
//Appel
startDraging("aim","sourceLayer","cloneLayer",300,200,20,20);
//-->
</script>
</body>
</html>
Il est à noter que :
1. Il doit y avoir trois définitions de div en HTML. La position du style doit être définie comme absolue dans les trois couches pour contrôler la position.
1. Calque cible (objectif), sa fonction principale est de définir la position où le glissement prend effet.
2. Faites glisser la source (sourceLayer). Faites attention à définir l'attribut unselectable = "off" (c'est étrange, le définir sur la plage on sélectionnera le contenu du calque pendant le processus de glissement)
3. Le calque utilisé pour la copie (cloneLayer).
2. Appel de fonction
Explication du paramètre startDraging :
Nom du calque cible initAim Nom de la source de glissement initSource initClone nom du calque utilisé pour la copie
initAimX La coordonnée de l'axe x du calque cible initAimY La coordonnée de l'axe y du calque cible initOrgnX La coordonnée x de la source de déplacement initOrgnY La coordonnée de l'axe Y de la source de déplacement
n'est testée que dans IE. Des commentaires ont été ajoutés à. le code. Vous pouvez ajouter l'opération d'écriture XML une fois que la source de glisser a atteint la cible. Et puis enregistrer les données de mise en page définie par l'utilisateur. Je ne suis pas très satisfait de l'algorithme de retour de l'animation. quelques suggestions d'amélioration. Je travaille actuellement sur le développement d'un ensemble de contrôles ajax basés sur asp.net2.0. J'espère que vous en aurez plus. Communiquez
ps : Le premier article de mon jardin de blog. .