Kürzlich habe ich einige Freunde im Internet gesehen, die nach Drag-and-Drop-Implementierungen gesucht haben, die der personalisierten Homepage und dem MSN-Bereich ähneln, und habe unten zufällig ein Beispiel gefunden, das jedoch viele Probleme aufwies Die spezifische Funktionsimplementierung lautet wie folgt:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>BlackSouls Drag-and-Drop-Demo</title >
<!- -
____________________________________
|--------Autor von BlackSoul---------|
|------------2006.03.30------ ---- ----|.
|[email protected] ------|
|-----------QQ:9136194---- ---- ------|.
|------http://blacksoul.cnblogs.cn---
| ==== ==============
-->
<style type="text/css">
body
{
margin:0px
}
#aim /*Legen Sie den Stil der Zielebene fest*/
{
position:absolute;/*Stil, der zum Steuern der Position der Ebene erforderlich ist*/
width:200px
height:30px;
border:1px solid
-color:#FFCCCC ;
}
#sourceLayer, #cloneLayer
{
position:absolute;/*Style notwendig, um die Position der Ebene zu steuern*/
width
:300px
;
border:1px
back-color:#CCCCCC
;
.docked
{
display:none;
filter:alpha(opacity=100)
;
.actived
{
display:block;
filter:alpha(opacity=
70);
</style>
</head>
<Körper>
<div id="aim">Platzierungsbereich</div>
<div id="sourceLayer" unselektierbar="off"><img src="
<div id="cloneLayer" class="docked" unselektierbar="off"> </div>
<script type="text/javascript" language="javascript">
<!--
/*
============================ =======
|--------Autor von BlackSoul---------|
|------------2006.03.30----- ---------|[email protected]
------ |
|-----------QQ:9136194--- -----------|
. |-----http://blacksoul.cnblogs.cn---
| ================
*/
//Setze das Layer-Objekt
var
target
;
//Definieren Sie die Anfangsposition jeder Ebene
var targetX;
var
orgnX
;
//Variablen während des Ziehens
var draging = false; //Ob es gezogen wird
var offsetX = 0; //Der linke und rechte Offset in der X-Richtung
var
offsetY = 0;
zurück; / /Animationsobjekt
var thisX zurückgeben; //X-Position des aktuellen Klon-Layers
var stepX
;
//
Verschiebungsgeschwindigkeit
//Ziehinformationen initialisieren
/*
initAimX Ziel-X-Koordinate
initAimY Ziel-Y-Koordinate
initOrgnX Drag-Quelle-X-Koordinate
initOrgnY Drag-Quelle-Y-Koordinate
*/
//Das Ebenenobjekt abrufen
function getLayer(inAim,inSource,inClone)
{
goal = document.getElementById(
inAim
)
;
function initDrag(initAimX,initAimY,initOrgnX,initOrgnY)
{
aimX
=
initAimY
;
orgnX =
initOrgnY
;
=
goalY;
sourceLayer.style.pixelTop
=
orgnY
;
//Drag-
Funktion vorbereiten BeforeDrag()
{
if (event.button != 1)
{
return;
cloneLayer.innerHTML
= sourceLayer.innerHTML; //Drag-Quellinhalt kopieren
offsetX = document.body.scrollLeft + event.clientX - sourceLayer.style.pixelLeft;
offsetY
= document.body.scrollTop + event.clientY -
sourceLayer.style.pixelTop
;
//
Ziehfunktion OnDrag()
{
if(!dragging)
{
return;
}
//Position aktualisieren
event.returnValue = false;
document.body.scrollLeft + event.clientX - offsetX
; = document.body.scrollTop + event.clientY - offsetY
;
//Ziehfunktion beenden
EndDrag()
{
if (event.button != 1)
{
return
}
draging = false;
if (event.clientX >= goal.style.pixelLeft && event.clientX <= (aim.style.pixelLeft + goal.offsetWidth) &&
event.clientY >= goal.style.pixelTop && event.clientY <= (aim.style
.pixelTop +goal.offsetHeight
))
{
//Die Drag-Ebene befindet sich im Ziel und wird automatisch an der Zielposition positioniert
.
cloneLayer.className = "docked";
/*
** Nachdem Sie dies abgeschlossen haben, können Sie XML verwenden, um die aktuelle Position zu speichern.
** Wenn der Benutzer das nächste Mal eingibt
, wird die Quell-Drag-Ebene mit den Daten in XML
initialisiert
.
else
{
//Durch Ziehen und Ablegen die Position der Drag-Quelle wiederherstellen
thisX = cloneLayer.style.pixelTop
;
offSetY =
Math.abs
(thisY - orgnY);
time = 500;//Setze die Animationszeit
stepX = Math.floor((offSetX/time)*20)
;
if(stepX == 0)
SchrittX = 2;
wenn (SchrittY == 0)
SchrittY = 2;
//Starte die Rückkehranimation
moveStart();
}
}
function moveStart()
{
back = setInterval("MoveLayer();",15
}
//Legen Sie die zurückgegebene Animationseffektfunktion fest.
MoveLayer()
{
//Befindet sich auf der oberen linken Seite des Ziels
if(cloneLayer.style.pixelLeft <= orgnX && cloneLayer.style.pixelTop <= orgnY)
{
cloneLayer.style.pixelLeft + = stepX;
cloneLayer.style .pixelTop += stepY;
//Wenn die Verschiebung den Zielwert überschreitet, wird die Geschwindigkeit auf pix eingestellt und in die entgegengesetzte Richtung zurückbewegt. Derselbe Effekt wird erzielt wie bei
if(cloneLayer.style. pixelLeft > orgnX)
{
stepX = 1;
}
if(cloneLayer.style.pixelTop > orgnY)
{
stepY = 1;
}
//Wenn die Koordinaten auf der X- oder Y-Achse gleich sind, erfolgt keine Verschiebung
if(cloneLayer.style .pixelLeft == orgnX)
{
stepX = 0;
}
if(cloneLayer .style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelTop == orgnY)
{
EndMove();
}
}
//Befindet sich unten links im Ziel
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)
if
(cloneLayer.style.pixelTop == orgnY)
{
stepY = 0;
}
if(cloneLayer.style.pixelLeft == orgnX && cloneLayer.style.pixelTop == orgnY)
{
EndMove
()
;
//Befindet sich oben rechts im Ziel
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
()
;
//Befindet sich oben rechts im Ziel
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
()
;
//das Ziel erreichen
else
{
EndMove(
)
;
//Animationsfunktion stoppen
EndMove()
{
sourceLayer.style.pixelTop = orgnY;
cloneLayer.style.pixelTop
=
orgnY;
cloneLayer.className = "docked";
clearInterval(back);
}
//Haupt-Drag-Funktion
function startDraging(inAim,inSource,inClone,initAimX,
initAimY,initOrgnX,initOrgnY)
{
getLayer(inAim,inSource,inClone)
initDrag(initAimX,initAimY,initOrgnX,initOrgnY);
sourceLayer.onmousedown = BeforeDrag;
onmousemove = OnDrag; //Wenn cloneLayer hier verwendet wird, wird der Inhalt in cloneLayer beim Ziehen ausgewählt und es treten einige Fehler auf ...
cloneLayer.onmouseup = EndDrag
}
//Call
startDraging("aim","sourceLayer","cloneLayer",300,200,20,20);
//-->
</script>
</body>
</html>
Es ist zu beachten, dass:
1. Es müssen drei Definitionen von div in HTML vorhanden sein. Die Position des Stils muss in allen drei Ebenen als absolut definiert werden, um die Position zu steuern.
1. Zielebene (Ziel), ihre Hauptfunktion besteht darin, die Position zu definieren, an der der Widerstand wirksam wird.
2. Ziehen Sie die Quelle (sourceLayer). Achten Sie darauf, das Attribut nicht auswählbar = „aus“ zu setzen (das ist seltsam, wenn Sie es auf den Bereich „Ein“ setzen, wird der Ebeneninhalt während des Ziehvorgangs ausgewählt).
3. Die zum Kopieren verwendete Ebene (cloneLayer).
2. Funktionsaufruf
Erklärung des startDraging-Parameters:
initAim Name der Zielebene initSource Name der Drag-Quelle initClone Name der Ebene, die zum Kopieren verwendet wird
initAimX Die x-Achsen-Koordinate der Zielebene initAimY Die y-Achsen-Koordinate der Zielebene initOrgnX Die x-Achsen-Koordinate der Drag-Quelle initOrgnY Die Y-Achsen-Koordinate der Drag-Quelle
wird nur im IE getestet. Kommentare wurden hinzugefügt Sie können den Code hinzufügen, nachdem die Drag-Quelle das Ziel erreicht hat. Ich hoffe, Sie können mir die Daten des benutzerdefinierten Seitenlayouts aufzeichnen Einige Verbesserungsvorschläge. Ich arbeite derzeit an der Entwicklung einer Reihe von Ajax-Steuerelementen auf Basis von asp.net2.0.
PS: Der erste Artikel in meinem Blog-Garten .