Dieser Artikel beschreibt die Methode zur Implementierung des Drag -Lay -Drag -Effekts des IgoogledivDrag -Moduls durch JS. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> js implementiert den Drag -Layer -Effekt des Igoogle Div Drag -Moduls </title>
<style type = "text/css">
*{Margin: 0px; Polsterung: 0px;}
Körper {Position: Relativ; Breite: 780px; Höhe: 800px; Rand: 1px solide rot}
.Dag {width: 200px; Höhe: 100px; Grenze: 1PX Solid #000; Margin: 20px; Hintergrund: #ffff}
.DRAG H1 {Margin: 0px; Polsterung: 0px; Schriftgröße: 12px; Höhe: 18px; Zeilenhöhe: 18px; Hintergrund:#e0e7f3; Text-Indent: 20px; Cursor: Bewegung;}
.Center {Margin: 200px; Grenze: 3px solide rot}
</style>
<script type = "text/javaScript"> </script>
</head>
<body>
<div>
<h1> <strong> www.baidu.com </strong> </h1>
</div>
<div>
<h1> www.163.com </h1>
</div>
<div>
<h1> <strong> www.vevb.com </strong> </h1>
</div>
<Div> <h1> Test 2 </h1> </div>
<Div> <h1> Test 3 </h1> </div>
<Div> <h1> Test 4 </h1> </div>
<Div> <h1> Test 5 </h1> </div>
</body>
</html>
<script type = "text/javaScript">
/*
Autor: popper.w
Version: v2.0
*/
var DragzindexNumber = 0;
Funktion Drag (obj) {
var ox, oy, ex, xy, tag = 0, mask = 0;
if (tag == 0) {
obj.onmousedown = function (e)
{
if (mask == 1) {return; }
Obj.Style.zindex = DragzIndexNumber ++;
transport (obj, "start")
Tag = 1;
var e = e || window.event;
ex = getEventOffset (e) .OffsetX;
ey = getEventOffset (e) .offsety;
ox = parsesint (obj.offsetleft);
oy = parseint (obj.offsettop);
tempdiv = document.createelement ("div");
mit (tempdiv.style)
{
width = obj.offsetwidth+"px";
Höhe = obj.offseteight+"px";
border = "1px gepunktet rot";
Position = "absolut";
links = obj.offsetleft+"px";
top = obj.offsettop+"px";
Zindex = 999;
}
document.body.appendchild (tempdiv);
this.ele = tempdiv;
FDRagstart (tempdiv);
document.body.onmousemove = function (e) {
if (tag == 1)
{
var e = e || window.event;
tempdiv.style.left = parseInt (e.clientx) -ex+"px";
tempdiv.style.top = parseInt (e.clienty) -ey+"px";
}
sonst {if (! tempdiv == null) tempdiv.parentnode.removechild (tempdiv)}
}
tempdiv.onmouseUp = Funktion (e)
{
var e = e || window.event;
FDRAGEND (TEMPDIV);
Obj.Style.position = "Absolute";
Movie (obj, ParseInt (e.clientx) -ex-19, ParseInt (e.clienty) -EY-20);
tempdiv.parentnode.removechild (tempdiv);
Tag = 0;
}
}
}
}
Funktionsfilm (o, l, t) {
var a = 1;
Maske = 1;
var ol = parseInt (o.offsetLeft);
var ot = parseInt (o.offsettop);
var itimer = setInterval (function () {
if (a == 10)
{
transport (o, "Ende");
Maske = 0;
ClearInterval (Itimer);
}
O.Style.Left = ol+a*(l-ol)/10+"px";
O.Style.top = OT+a*(t-OT)/10+"px";
a ++;
}, 20);
}
Funktion fcanclebubble (e)
{
var e = window.event || e;
if (e.preventDefault) e.preventDefault ();
sonst e.returnValue = falsch;
}
Funktion transport (o, modus) {
if (modus == "start") {
if (document.all) {
O.Style.Filter = "Alpha (Opazität = 50)";
}anders{
O.Style.Opacity = 0,5;
}
}
anders {
if (document.all) {
O.Style.Filter = "Alpha (Opazität = 100)";
}anders{
O.Style.Opacity = 1;
}
}
}
Funktion getOffset (EVT)
{
var target = evt.target;
if (target.Offsetleft == undefiniert)
{
target = target.parentnode;
}
var pagecoord = getPagecoord (Ziel);
var eventCoord =
{
x: window.pagexoffset + evt.clientx,
y: window.pageyoffset + evt.clienty
};
var offset =
{
OffsetX: eventCoord.x - pagecoord.x,
Offsety: eventCoord.y - pagecoord.y
};
Rückset zurück;
}
Funktion getPagecoord (Element)
{
var Coord = {x: 0, y: 0};
While (Element)
{
coord.x += element.offsetLeft;
koordinate.y += element.offsettop;
element = element.offsetParent;
}
Rückgabekoordination;
}
Funktion getEventOffset (EVT)
{
var msg = "";
if (evt.offsetX == undefiniert)
{
var evtoffsets = getOffset (EVT);
msg = {offsetX: evtOffsets.OffsetX, Offsety: evtoffsets.offsety};
}
anders
{
msg = {offsetx: evt.offsetx, offsety: evt.offsety};
}
MSG zurückgeben;
}
Funktion FDRagstart (xele)
{
Schalter (fckbrs ())
{
Fall 3:
window.getSelection (). removeallranges ();
brechen;
Standard:
Xele.setcapture ();
brechen;
}
}
Funktion FDRAGEND (XELE)
{
Schalter (fckbrs ())
{
Fall 3:
window.getSelection (). removeallranges ();
brechen;
Standard:
Xele.releascapture ();
brechen;
}
}
Funktion fckbrs ()
{
Switch (Navigator.Appname)
{
Fall 'Opera': Rückgabe 2;
Fall 'Netscape': Rückkehr 3;
Standard: Rückgabe 1;
}
}
var element = document.getElementsByTagName ("div");
für (var i = 0; i <element.length; i ++) {
if (Element [i] .ClassName == "Drag") {
Drag (Element [i])}
}
</script>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.