Dieser Artikel beschreibt die Methode zum Ziehen und Ablegen von Spezialeffekten von JS, das das igoogle -benutzerdefinierte Homepage -Modul nachahmt. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> js imitieren igoogle benutzerdefinierte homepage modul modul modul und drop effect </title>
<script type = "text/javaScript">
var Common = {
getEvent: function () {// ie/ff
if (document.all) {
Rückkehrfenster.Event;
}
func = getEvent.caller;
while (func! = null) {
var arg0 = func.argumente [0];
if (arg0) {
if ((arg0.constructor == Ereignis || arg0.constructor == MouseeEvent) || (Typof (arg0) == "Objekt" && arg0.preventDefault && arg0.stoppropagation) {
kehren Arg0 zurück;
}
}
func = func.caller;
}
null zurückkehren;
},
getMousepos: function (ev) {
if (! ev) {
ev = this.getEvent ();
}
if (ev.pagex || ev.pagey) {
zurückkehren {
x: ev.pagex,
Y: Ev.pagey
};
}
if (document.documentElement && document.documentElement.scrolltop) {
zurückkehren {
x: ev.clientx + document.documentElement.scrollleft - document.documentElement.clientleft,
y: ev.clienty + document.documentElement.scrolltop - document.documentElement.clienttop
};
}
sonst wenn (document.body) {
zurückkehren {
x: ev.clientX + document.body.scrollleft - document.body.clientleft,
y: ev.clienty + document.body.scrolltop - document.body.clienttop
};
}
},
getElementpos: function (el) {
el = this.getItelself (el);
var _x = 0, _y = 0;
Tun {
_x += El.OffsetLeft;
_y += el.offsettop;
} while (el = el.offsetParent);
return {x: _x, y: _y};
},
GetItself: function (id) {
Rückgabe "String" == Typeof ID? document.getElementById (ID): ID;
},
GetViewPortSize: {w: (window.innnerwidth)? window.innnerwidth: (document.documentElement && document.documentElement.clientwidth)? document.documentElement.clientwidth: (document.body? document.body.offsetwidth: 0), h: (window.innerHeight)? window.innerHeight: (document.documentElement && document.documentElement.clientHeight)? document.documentElement.clientHeight: (document.body? document.body.offseteight: 0)},
Isie: Dokument.All? Richtig: Falsch,
setoUterHtml: function (obj, html) {
var objrange = document.createrange ();
obj.innerhtml = html;
Objrange.selectnodecontents (OBJ);
var frag = objrange.extractContents ();
obj.parentnode.insertbefore (frag, obj);
obj.parentnode.removechild (obj);
},
FirstChild: Funktion (parentObj, tagname) {
if (Common.isie) {
Return Parentobj.Firstchild;
}
anders {
var arr = parentObj.getElementsByTagName (TagName);
return arr [0];
}
},
lastChild: function (parentObj, tagname) {
if (Common.isie) {
Return Parentobj.Lastchild;
}
anders {
var arr = parentObj.getElementsByTagName (TagName);
return arr [arr.length - 1];
}
},
setCookie: function (name, value) {
document.cookie = name + "=" + Wert;
},
getcookie: function (name) {
var strcookie = document.cookie;
var arrcookie = strcookie.split (";");
für (var i = 0; i <arrCookie.length; i ++) {
var arr = arrCookie [i] .Split ("=");
if (! arr [1]) {
zurückkehren "";
}
if (arr [0] == Name) {
return arr [1];
}
}
zurückkehren "";
},
Delcookie: Funktion (Name) {
var exp = neues Datum ();
exp.settime (exp.getTime () - 1);
var cval = this.getCookie (Name);
if (cval! = null) document.cookie = name + "=" + cval + "; expires =" + exp.togmtstring ();
}
}
var class = {
erstellen: function () {
return function () {this.init.apply (this, argumente); }
}
}
var drag = class.create ();
Drag.Prototype = {
Init: Funktion (Titelleiste, Dragdiv, Optionen) {
// Stellen Sie fest, ob Klicks transparent sind, der Standard ist 60% transparent
titellebar = Common.GetItelself (Titelleiste);
Dragdiv = Common.GetItelself (Dragdiv);
this.dagarea = {maxleft: -9999, maxright: 9999, maxtop: -9999, maxbottom: 9999};
if (Optionen) {
this.opacity = options.opacity? (iSnan (ParseInt (Optionen.Opazität))? 100: ParseInt (Optionen.Opazität): 100;
if (options.area) {
if (options.area.left &&! isnan (parseInt (options.area.left))) {this.dragarea.maxLeft = options.area.left};
if (options.area.right &&! isnan (parseInt (options.area.right))) {this.dragarea.maxright = options.area.right};
if (options.area.top &&! isnan (parseInt (options.area.top))) {this.dragarea.maxtop = options.area.top};
if (options.area.bottom &&! isnan (parseInt (options.area.bottom))) {this.dragarea.maxbottom = options.area.bottom};
}
}
anders {
this.opacity = 60;
}
this.origindRagdiv = null;
this.tmpx = 0;
this.tmpy = 0;
this.movable = false;
this.dragArray = [];
var dragobj = this;
var dragtbl = document.getElementById ("DragTable");
titellebar.onmouseDown = function (e) {
var ev = e || window.event || Common.GeteEvent ();
// Ziehen und fallen nur durch die linke Maustaste, dh die linke Maustaste ist 1 Firefox ist 0
if (Common.isie && ev.button == 1 ||! Common.isie && ev.button == 0) {
}
anders {
false zurückgeben;
}
// Sonderfälle behandeln: Wenn die obere/untere Bewegung nicht auftritt, kehrt sie zur oberen/unteren Spalte des anfänglichen Widerstands zurück.
var tmpcolid;
für (c = 0; c <dragtbl.rows [0] .cells.length; c ++) {
für (k = 0; k <dragtbl.rows [0] .cells [c] .GetElementsByTagName ("div"). Länge; K ++) {
if (dragdiv.id == dragtbl.rows [0] .cells [c] .getElementsByTagName ("div") [k] .id) {
tmpcolid = c;
brechen;
}
}
}
var tmpposfirstchild = Common.GetElementPos (Common.Firstchild (Dragtbl.Rows [0] .Cells [tmpcolid], "div");
var tmpposlastchild = Common.GetElementPos (Common.lastchild (Dragtbl.Rows [0] .Cells [tmpcolid], "div");
var tmpobj = {colid: tmpcolid, firstChildUp: tmpposfirstchild.y, lastChilddown: tmpposlastchild.y + Common.lastchild (dragtbl.rows [0] .cells [tmpcolid], "divSethight};
// Speichern Sie den aktuellen Ort, an dem jeder Container gezogen und fallen gelassen werden kann
DragObj.dragarray = DragObj.regdragspos ();
// das gepunktete Box einfügen
var Dasedelement = document.createelement ("div");
DasedElement.Style.CSSTEXT = DragDiv.Style.cStext;
Dashedelement.style.border = "gestrichelt 2PX #AAA";
Diedelement.Style.Marginbottom = "6px";
DieedElement.Style.width = Dragdiv.Offsetwidth - 2 * ParseInt (Dasstyle.Style.Borderwidth) + "PX"; // die boderbreite subtrahieren, um die gepunktete Boxgröße mit Dragdiv übereinzustimmen
DasedElement.Style.Height = Dragdiv.offseteight - 2 * ParseInt (Dasstyle.Style.Borderwidth) + "PX"; // PX hinzufügen, um sicherzustellen, dass FF korrekt ist
Diedelement.style.position = "relativ";
if (dragdiv.nextsibling) {
Dragdiv.Parentnode.insertBefore (DashedElement, Dragdiv.Nextsibling);
}
anders {
Dragdiv.Parentnode.AppendChild (Dasstern);
}
// Es wird absolut beim Ziehen
Dragdiv.Style.Width = Dragdiv.Offsetwidth + "px";
Dragdiv.Style.position = "Absolute";
DragObj.Movable = true;
DragDiv.Style.zindex = DragObj.getZindex () + 1;
var downpos = Common.getMousepos (ev);
DragObj.tmpx = Downpos.x - Dragdiv.OffsetLeft;
DragObj.tmpy = Downpos.y - Dragdiv.offsettop;
if (Common.isie) {
DragDiv.setCapture ();
} anders {
window.captureEvents (event.mousemove);
}
DragObj.Setopacity (Dragdiv, DragObj.Opacity);
// Firefox beseitigt das Problem des Ziehens und Ablegens von Bildern in den Container
if (ev.preventDefault) {
Ev.PreventDefault ();
ev.stoppropagation ();
}
document.onmousemove = function (e) {
if (dragobj.movable) {
var ev = e || window.event || Common.GeteEvent ();
// dh entfernt das Problem, Bilder in den Container zu schleppen und fallen zu lassen
if (document.all) // dh
{
ev.ReturnValue = false;
}
var movepos = Common.getMousepos (ev);
Dragdiv.style.left = math.max (math.min (movepos.x - dragobj.tmpx, Dragobj.dragarea.maxright), Dragobj.dragarea.maxleft) + "px";
Dragdiv.style.top = math.max (math.min (movepos.y - dragobj.tmpy, dragobj.dragarea.maxbottom), dragobj.dragarea.maxtop) + "px";
var targetDiv = null;
für (var k = 0; k <dragobj.dragarray.length; k ++) {
if (dragdiv == dragobj.dragarray [i]) {
weitermachen;
}
if (movepos.x> dragobj.dragarray [k] .posleft && movepos.x <dragobj.dragarray [k] .posleft + dragobj.dragarray [k] .poswidth
&& movepos.y> dragobj.dragarray [k] .postop && movepos.y <dragobj.dragarray [k] .postop + dragobj.dragarray [k] .posheight
) {
targetDiv = document.getElementById (Dragobj.dragarray [k] .Dagid);
if (movepos.y <dragobj.dragarray [k] .postop + dragobj.dragarray [k] .posheight / 2) {
// nach oben bewegen
DieedElement.Style.width = targetDiv.Offsetwidth - 2 * ParseInt (Dasstyle.Style.Borderwidth) + "PX";
targetDiv.Parentnode.insertbefore (DashedElement, targetDiv);
}
anders {
// nach unten bewege
DieedElement.Style.width = targetDiv.Offsetwidth - 2 * ParseInt (Dasstyle.Style.Borderwidth) + "PX";
if (targetDiv.nextsibling) {
targetDiv.Parentnode.insertbefore (DashedElement, targetDiv.Nextsibling);
}
anders {
targetDiv.Parentnode.AppendChild (DashedElement);
}
}
}
}
für (j = 0; j <dragtbl.rows [0] .cells.length; j ++) {
var startleft = Common.GetElementPos (Dragtbl.Rows [0] .Cells [j]). x;
if (movepos.x> startleft && movepos.x <startleft + dragtbl.rows [0] .cells [j] .Offsetwidth) {
/// Spalte hat keine Div
if (dragtbl.rows [0] .cells [j] .GetElementsByTagName ("div"). Länge == 0) {
DasedElement.Style.width = Dragtbl.rows [0] .Cells [j] .Offsetwidth - 2 * ParseInt (Dashedelement.Style.Borderwidth) + "px";
Dragtbl.rows [0] .Cells [j] .AppendChild (DashedElement);
}
anders {
var posfirstchild = Common.GetElementPos (Common.Firstchild (Dragtbl.Rows [0] .Cells [j], "div");
var poslastchild = Common.GetElementPos (Common.Lastchild (Dragtbl.Rows [0] .Cells [j], "div");
// Sonderfälle behandeln: Wenn die obere/untere Bewegung nicht auftritt, kehrt sie zur oberen/unteren Spalte des anfänglichen Widerstands zurück.
var tmpup, tmpdown;
if (tmpobj.colid == j) {
tmpup = tmpobj.firstchildup;
tmpdown = tmpobj.lastchilddown;
}
anders {
tmpup = posfirstchild.y;
tmpdown = poslastchild.y + Common.lastchild (dragtbl.rows [0] .cells [j], "div"). Offseteight;
}
if (movepos.y <tmpup) {/// Fügen Sie das gepunktete Box von oben ein
Diedelement.style.width = Common.Firstchild (Dragtbl.Rows [0] .Cells [j], "div").
Dragtbl.rows [0] .Cells [j] .InsertBefore (Dashedelement, Common.Firstchild (Dragtbl.Rows [0] .Cells [j], "div");
}
sonst if (movepos.y> tmpdown) {/// Fügen Sie das gepunktete Feld von unten ein
Dasedelement.style.width = Common.lastchild (Dragtbl.Rows [0] .Cells [j], "div").
Dragtbl.rows [0] .Cells [j] .AppendChild (DashedElement);
}
}
}
}
}
};
document.onmouseUp = function () {
if (dragobj.movable) {
if (Common.isie) {
Dragdiv.Releascapture ();
}
anders {
window.ReleaseEvents (dragdiv.mousemove);
}
DragObj.Setopacity (Dragdiv, 100);
DragObj.Movable = false;
DragObj.tmpx = 0;
DragObj.tmpy = 0;
// Schreiben Sie es unbedingt darin, wenn
Dragdiv.Style.Left = "";
Dragdiv.Style.top = "";
Dragdiv.Style.width = "";
Dragdiv.Style.position = "";
DashedElement.Parentnode.insertBefore (Dragdiv, Verstreat);
DashedElement.Parentnode.removechild (DashedElement);
}
};
}
},
Setopazität: Funktion (Dragdiv, n) {
if (Common.isie) {
Dragdiv.Filters.Alpha.Opacity = n;
}
anders {
Dragdiv.Style.Opacity = n / 100;
}
},
GEtzindex: function () {
var maxzindex = 0;
var divs = document.getElementsByTagName ("div");
für (z = 0; z <divs.length; z ++) {
maxzindex = math.max (maxzindex, divs [z] .style.zindex);
}
MAXZINDEX zurückgeben;
},
Regdragspos: function () {
var arrdragdivs = new Array ();
var dragtbl = document.getElementById ("DragTable");
var tmpdiv, tmppos;
für (i = 0; i <dragtbl.getElementsByTagName ("div"). Länge; i ++) {
tmpdiv = dragtbl.getElementsByTagName ("div") [i];
if (tmpdiv.className == "Dragdiv") {
TMPPOS = Common.GetElementPos (TMPDIV);
arrdragdivs.push ({Dragid: tmpdiv.id, posleft: tmppos.x, postop: tmppos.y, poswidth: tmpdiv.offsetwidth, posheight: tmpdiv.offsHeight});
}
}
return arrdragdivs;
}
}
window.onload = function () {
var dragtbl = document.getElementById ("DragTable");
if (Common.getCookie ("configarr") {
var configarr = eval ("(" + common.getCookie ("configarr") + ")");
für (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
für (j = 0; j <configarr [i] .Length; j ++) {
Dragtbl.rows [0] .Cells [i] .AppendChild (document.getElementById (configarr [i] [j]));
}
}
}
New Drag ("TitelBar1", "Dragdiv1");
New Drag ("TitelBAR2", "Dragdiv2");
New Drag ("TitelBar3", "Dragdiv3");
New Drag ("TitelBar4", "Dragdiv4");
new Drag ("titellebar5", "Dragdiv5");
}
window.onunload = function () {
var dragtbl = document.getElementById ("DragTable");
var configarr = "";
für (i = 0; i <dragtbl.rows [0] .cells.length; i ++) {
var tmpstr = "";
für (j = 0; j <dragtbl.rows [0] .cells [i] .GetElementsByTagName ("div"). Länge; j ++) {
tmpstr + = (tmpstr == ""? "": ",") + "'" + dragtbl.rows [0] .Cells [i] .GetElementsByTagName ("div") [j] .id + "'";
}
configarr + = (configarr == ""? "": ",") + "[" + tmpstr + "]";
}
// Format wie: [['Dragdiv3', 'Dragdiv5'], ['Dragdiv4', 'Dragdiv1'], ['Dragdiv2']]
Common.setcookie ("configarr", "[" + configarr + "]");
}
</script>
<style type = "text/css">
.spandiv {
Position: Relativ;
Breite: 5px;
Höhe: 5px;
}
.Dragdiv, .nodragdiv {
Position: Relativ;
Filter: Alpha (Opazität = 100);
Deckkraft: 1;
Randboden: 6PX;
Hintergrundfarbe: #fffff;
}
</style>
</head>
<body>
<script type = "text/javaScript">
</script>
<table id = "Dragtable" CellPadding = "3" style = "Border: Solid 0px grün; Breite: 98%;">
<tr>
<td valign = "top">
<div id = "dragdiv1">
<Table CellPadding = "0" cellpacing = "0">
<tr id = "titellebar1" style = "height: 22px; text-align: links; Hintergrundfarbe:#547bc9; Farbe: Weiß; Padding: 3px; Cursor: Move;">
<th align = "links" unauswählbar = "auf"> title1 </th>
</tr>
<tr style = "Höhe: 130px; Padding: 3px;" Align = "links" valign = "top">
<td nicht wählbar = "auf"> Die Charaktere hier sind relativ lang ... Ich bin hier ... China ... China ... fremd. Sehen Sie, ob es einen Überlauf gibt! </td>
</tr>
</table>
</div>
<div id = "dragdiv2">
<Table CellPadding = "0" cellpacing = "0">
<tr id = "titellebar2" style = "Höhe: 22px; text-align: links; Hintergrundfarbe:#547bc9; Farbe: Weiß; Polster: 3px; Cursor: Move;">
<th align = "links" nicht ausgewählbar = "auf"> title2 </th>
</tr>
<tr style = "Höhe: 130px; Padding: 3px;" Align = "links" valign = "top">
<td nicht ausgewählbar = "on"> content2 ... </td>
</tr>
</table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv3">
<Table CellPadding = "0" cellpacing = "0">
<tr id = "titellebar3" style = "height: 22px; text-align: links; Hintergrundfarbe:#547bc9; Farbe: Weiß; Padding: 3px; Cursor: Move;">
<th align = "links" nicht ausgewählbar = "auf"> title3 </th>
</tr>
<tr style = "Höhe: 230px; Padding: 3px;" Align = "links" valign = "top">
<td nicht ausgewählbar = "on"> content3 ... </td>
</tr>
</table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv4">
<Table CellPadding = "0" cellpacing = "0">
<tr id = "titellebar4" style = "height: 22px; text-align: links; Hintergrundfarbe:#547bc9; Farbe: Weiß; Polster: 3px; Cursor: Move;">
<th align = "links" unauswählbar = "auf"> title4 </th>
</tr>
<tr style = "Höhe: 130px; Padding: 3px;" Align = "links" valign = "top">
<td nicht ausgewählbar = "auf"> content4 ... </td>
</tr>
</table>
</div>
<div id = "dragdiv5">
<Table CellPadding = "0" cellpacing = "0">
<tr id = "titellebar5" style = "height: 22px; text-align: links; Hintergrundfarbe:#547bc9; Farbe: Weiß; Padding: 3px; Cursor: Move;">
<th align = "links" unauswählbar = "on"> title5 </th>
</tr>
<tr style = "Höhe: 130px; Padding: 3px;" Align = "links" valign = "top">
<td nicht ausgewählbar = "on"> content5 ... </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
<br> <br> <hr> im Internet gesammelt, nur zum Austausch von Interessen und Lernen und nicht für kommerzielle Zwecke. </font> </p>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.