Cet article décrit la méthode de traînée et de suppression des effets spéciaux du module de page d'accueil personnalisé igoogle JS igoogle. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> js imiter igoogle module de page d'accueil personnalisé glisser-déposer Effet </Title>
<script type = "text / javascript">
var commun = {
getEvent: function () {// ie / ff
if (document.all) {
return window.event;
}
func = getEvent.Caller;
while (func! = null) {
var arg0 = func.Arguments [0];
if (arg0) {
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "objet" && arg0.preventdefault && arg0.stoppropagation)) {
retour arg0;
}
}
func = func.Caller;
}
retourner null;
},
getMouspos: fonction (ev) {
if (! ev) {
ev = this.getEvent ();
}
if (ev.pagex || ev.pagey) {
retour {
x: ev.pagex,
y: ev.pagey
};
}
if (document.DocumentElement && document.DocumentElement.ScrollTop) {
retour {
x: ev.clientx + document.DocumentElement.Scrollleft - document.DocumentElement.ClientLeft,
y: ev.clienty + document.DocumentElement.ScrollTop - document.DocumentElement.ClientTop
};
}
else if (document.body) {
retour {
x: ev.clientx + document.body.scrollleft - document.body.clientleft,
y: ev.clienty + document.body.scrolltop - document.body.clienttop
};
}
},
getElementPos: fonction (el) {
el = this.getitelf (el);
var _x = 0, _y = 0;
faire {
_x + = el.offsetLeft;
_y + = el.offsetTop;
} while (el = el.offsetparent);
return {x: _x, y: _y};
},
getItself: function (id) {
return "String" == typeof id? document.getElementById (id): id;
},
getViewportSize: {w: (window.innerwidth)? window.innerwidth: (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.offsetheight: 0)},
ISIE: Document. tout? vrai: faux,
setouterhtml: fonction (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: fonction (parentObj, tagname) {
if (Common.isie) {
return parentObj.firstChild;
}
autre {
var arr = parentObj.getElementsByTagName (tagName);
return arr [0];
}
},
LastChild: fonction (parentObj, tagname) {
if (Common.isie) {
Retour ParentObj.LastChild;
}
autre {
var arr = parentObj.getElementsByTagName (tagName);
return arr [arr.length - 1];
}
},
setcookie: fonction (nom, valeur) {
document.cookie = name + "=" + valeur;
},
getcookie: function (name) {
var strCookie = document.cookie;
var Arrcookie = strCookie.split (";");
pour (var i = 0; i <Arrcookie.length; i ++) {
var arr = Arrcookie [i] .split ("=");
if (! arr [1]) {
retour "";
}
if (arr [0] == name) {
return arr [1];
}
}
retour "";
},
delcookie: fonction (nom) {
var exp = new Date ();
exp.setTime (exp.getTime () - 1);
var cval = this.getcookie (nom);
if (cval! = null) document.cookie = name + "=" + cval + "; expires =" + exp.togmtString ();
}
}
var class = {
create: function () {
return function () {this.init.apply (this, arguments); }
}
}
var drag = class.create ();
Drag.prototype = {
init: function (titlebar, dragdiv, options) {
// Définissez si les clics sont transparents, la valeur par défaut est transparente à 60%
TitleBar = Common.getItelf (TitleBar);
DragDiv = Common.getItelf (dragdiv);
this.dragarea = {maxleft: -9999, maxright: 9999, maxtop: -9999, maxbottom: 9999};
if (options) {
this.opacity = options.opacity? (isnan (parseInt (options.opacity))? 100: parseInt (options.opacity)): 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};
}
}
autre {
this.opacity = 60;
}
this.origindragdiv = null;
this.tmpx = 0;
this.tmpy = 0;
this.moveable = false;
this.dragarray = [];
var dragobj = this;
var dragtbl = document.getElementById ("dragTable");
titlebar.onmousedown = function (e) {
var ev = e || window.event || Common.getEvent ();
// Faites glisser et déposez uniquement le bouton gauche de la souris, c'est-à-dire que le bouton gauche de la souris est 1 Firefox est 0
if (Common.isie && ev.button == 1 ||! Common.isie && ev.button == 0) {
}
autre {
retourne false;
}
// Traitez les cas spéciaux: lorsque le mouvement supérieur / inférieur n'est pas rencontré, il revient à la colonne supérieure / inférieure de la traînée initiale.
var tmpColid;
pour (c = 0; c <dragtbl.Rows [0] .Cells.length; c ++) {
pour (k = 0; k <dragtbl.Rows [0] .Cells [c] .getElementsByTagName ("div"). Length; k ++) {
if (dragDiv.id == dragtbl.Rows [0] .Cells [c] .getElementsByTagName ("div") [k] .id) {
tmpColid = c;
casser;
}
}
}
var tmppposFirstChild = Common.getElementPos (Common.FirstChild (dragtbl.Rows [0] .Cells [tmpColid], "div"));
var tmppposlastchild = Common.getElementPos (Common.lastChild (dragtbl.Rows [0] .Cells [tmpColid], "div"));
var tmpobj = {colid: tmpcolid, firstchildup: tmposfirstchild.y, lastchilddown: tmposlastchild.y + commun.lastchild (dragtbl.rows [0] .cells [tmpcolid], "div"). offSetheight};
// Enregistrer l'emplacement actuel où chaque conteneur peut être traîné et abandonné
dragoBj.Dragarray = dragobj.regdragspos ();
// insérer la boîte pointillée
var dasheDelement = document.CreateElement ("div");
dashededelement.style.csstext = dragdiv.style.csstext;
davededelement.style.border = "Dashed 2px #aaa";
davededelement.style.marginbottom = "6px";
davededelement.style.width = dragdiv.offsetwidth - 2 * parseInt (davededelement.style.borderwidth) + "px"; // Soustrayez la largewidth pour maintenir la taille de la boîte en pointillé cohérente avec DragDiv
dashededelement.style.height = dragdiv.offsetheight - 2 * parseInt (davededelement.style.borderwidth) + "px"; // ajouter PX pour s'assurer que FF est correct
davededelement.style.position = "relatif";
if (dragdiv.nextsibling) {
dragdiv.parentNode.insertBefore (dashededelement, dragdiv.nextsibling);
}
autre {
DragDiv.ParentNode.ApendChild (dashedElement);
}
// il devient absolu lors de la traînée
dragdiv.style.width = dragdiv.offsetwidth + "px";
dragdiv.style.position = "absolu";
dragoBj.moveable = true;
dragdiv.style.zindex = dragobj.getzindex () + 1;
var downpos = Common.getMouspos (ev);
dragoBj.tmpx = downpos.x - dragdiv.offsetLeft;
dragoBj.tmpy = downpos.y - dragdiv.offsetTop;
if (Common.isie) {
dragdiv.setCapture ();
} autre {
Window.CaptureEvents (Event.MousMove);
}
dragoBj.SetOpacity (dragdiv, dragoBj.opacity);
// Firefox supprime le problème de la traînée et de la suppression d'images dans le conteneur
if (ev.preventdefault) {
ev.PreventDefault ();
ev.stoppropagation ();
}
document.onmousemove = fonction (e) {
if (dragoBj.movable) {
var ev = e || window.event || Common.getEvent ();
// IE supprime le problème de la glisser et de laisser tomber des images dans le conteneur
if (document.all) // c'est-à-dire
{
ev.returnvalue = false;
}
var movePos = Common.getMouspos (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.mextop) + "px";
var TargetDiv = null;
pour (var k = 0; k <dragobj.dragarray.length; k ++) {
if (dragdiv == dragobj.dragarray [i]) {
continuer;
}
if (movepos.x> dragobj.dragarray [k] .posleft && movepos.x <dragobj.dragarray [k] .posleft + dragobj.dragarray [k] .poswidth
&& movePos.y> dragobj.dragarray [k] .postop && mowitpos.y <dragobj.dragarray [k] .postop + dragobj.dragarray [k] .posheight
) {
TargetDiv = document.getElementById (dragobj.dragarray [k] .dragid);
if (movepos.y <dragobj.dragarray [k] .postop + dragobj.dragarray [k] .posheight / 2) {
// monte
dashededelement.style.width = TargetDiv.offsetWidth - 2 * parseInt (davededelement.style.borderwidth) + "px";
TargetDiv.ParentNode.InsertBefore (dasheDelement, TargetDiv);
}
autre {
//Descendre
dashededelement.style.width = TargetDiv.offsetWidth - 2 * parseInt (davededelement.style.borderwidth) + "px";
if (targetdiv.nextsibling) {
TargetDiv.ParentNode.InsertBefore (dashededelement, TargetDiv.NextSibling);
}
autre {
TargetDiv.ParentNode.ApendChild (Dashededelement);
}
}
}
}
pour (j = 0; j <dragtbl.Rows [0] .Cells.length; j ++) {
var startrleft = Common.getElementPos (dragtbl.Rows [0] .Cells [j]). x;
if (movePos.x> surprenant && movePos.x <startrleft + dragtbl.Rows [0] .Cells [j] .offsetwidth) {
/// colonne n'a pas de div
if (dragtbl.Rows [0] .Cells [j] .getElementsByTagName ("div"). Length == 0) {
davededelement.style.width = dragtbl.Rows [0] .Cells [j] .offsetWidth - 2 * paSeInt (dashededelement.style.borderwidth) + "px";
dragtbl.Rows [0] .Cells [J] .APPENDCHILD (davededelement);
}
autre {
var posFirstChild = Common.getElementPos (Common.FirstChild (dragtbl.Rows [0] .Cells [j], "div"));
var poslastChild = Common.getElementPos (Common.LastChild (dragtbl.rows [0] .Cells [j], "div"));
// Traitez les cas spéciaux: lorsque le mouvement supérieur / inférieur n'est pas rencontré, il revient à la colonne supérieure / inférieure de la traînée initiale.
var tmpup, tmpDown;
if (tmpobj.colid == j) {
tmpup = tmpobj.firstchildup;
tmpDown = tmpobj.lastchildDown;
}
autre {
tmpup = posfirstchild.y;
tmpDown = poslastChild.y + Common.lastChild (dragtbl.Rows [0] .Cells [j], "div"). offSetheight;
}
if (movePos.y <tmpup) {/// insérer la boîte en pointillée du haut
dashededelement.style.width = Common.FirstChild (dragtbl.Rows [0] .Cells [j], "div"). OffsetWidth - 2 * parseInt (dashedelement.style.borderwidth) + "px";
dragtbl.Rows [0] .Cells [J] .InsertBefore (dashedeDelement, Common.FirstChild (dragtbl.Rows [0] .Cells [j], "div"));
}
else if (movepos.y> tmpdown) {/// insérer la boîte en pointillés en bas
davededelement.style.width = Common.lastChild (dragtbl.Rows [0] .Cells [j], "div"). OffsetWidth - 2 * parseInt (davededelement.style.borderwidth) + "px";
dragtbl.Rows [0] .Cells [J] .APPENDCHILD (davededelement);
}
}
}
}
}
};
document.onmouseup = function () {
if (dragoBj.movable) {
if (Common.isie) {
DragDiv.ReleAsCapture ();
}
autre {
window.releaseEvents (dragdiv.mousmove);
}
DragObj.SetOpacity (dragdiv, 100);
DragObj.Moveable = false;
dragoBj.tmpx = 0;
dragoBj.tmpy = 0;
// assurez-vous de l'écrire dans ce
dragdiv.style.left = "";
dragdiv.style.top = "";
dragdiv.style.width = "";
dragdiv.style.position = "";
davededelement.parentNode.InsertBefore (dragdiv, davededelement);
davededelement.parentNode.RemoveChild (davededelement);
}
};
}
},
SetOpacity: function (dragdiv, n) {
if (Common.isie) {
dragdiv.filters.alpha.opacity = n;
}
autre {
dragdiv.style.opacity = n / 100;
}
},
Getzindex: function () {
var maxzIndex = 0;
var divs = document.getElementsByTagName ("div");
pour (z = 0; z <divs.length; z ++) {
maxzIndex = math.max (maxzindex, divs [z] .style.zindex);
}
return maxzzindex;
},
RegRragspos: function () {
var arrdragdivs = new Array ();
var dragtbl = document.getElementById ("dragTable");
var tmpdiv, tMPPOS;
pour (i = 0; i <drawtbl.getElementsByTAGName ("div"). Length; 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.offsetheight});
}
}
retourrrragdivs;
}
}
window.onload = function () {
var dragtbl = document.getElementById ("dragTable");
if (Common.getCooKie ("configarr")) {
var configarr = eval ("(" + common.getcookie ("configarr") + ")");
pour (i = 0; i <drawtbl.Rows [0] .Cells.length; i ++) {
pour (j = 0; j <configarr [i] .length; j ++) {
dragtbl.Rows [0] .Cells [i] .APPENDCHILD (document.getElementById (configarr [i] [j]));
}
}
}
New Drag ("TitleBar1", "DragDiv1");
new Drag ("TitleBar2", "DragDiv2");
new Drag ("TitleBar3", "DragDiv3");
New Drag ("TitleBar4", "DragDiv4");
New Drag ("TitleBar5", "DragDiv5");
}
window.onunload = function () {
var dragtbl = document.getElementById ("dragTable");
var configarr = "";
pour (i = 0; i <drawtbl.Rows [0] .Cells.length; i ++) {
var tmptr = "";
pour (j = 0; j <dragtbl.Rows [0] .Cells [i] .getElementsByTAGName ("div"). Length; J ++) {
tmptr + = (tmptr == ""? "": ",") + "'" + dragtbl.Rows [0] .Cells [i] .getElementsByTAGName ("div") [j] .id + "'";
}
configarr + = (configarr == ""? "": ",") + "[" + tmptr + "]";
}
// Format comme: [['dragdiv3', 'dragdiv5'], ['dragdiv4', 'dragdiv1'], ['dragdiv2']]]
Common.SetCookie ("configarr", "[" + configarr + "]");
}
</cript>
<style type = "text / css">
.spandiv {
Position: relative;
Largeur: 5px;
hauteur: 5px;
}
.Dragdiv, .NoDragDiv {
Position: relative;
filtre: alpha (opacité = 100);
Opacité: 1;
marge-fond: 6px;
Color d'arrière-plan: #FFFFF;
}
</ style>
</ head>
<body>
<script type = "text / javascript">
</cript>
<table id = "dragable" cellpadding = "3" style = "border: solide 0px vert; largeur: 98%;">
<tr>
<td valign = "top">
<div id = "dragdiv1">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar1" style = "height: 22px; text-align: Left; background-color: # 547bc9; couleur: blanc; padding: 3px; curseur: move;">
<th align = "Left" Unselectable = "ON"> Title1 </ Th>
</tr>
<tr style = "hauteur: 130px; rembourrage: 3px;" align = "Left" valign = "top">
<td nonselectable = "on"> Les personnages ici sont relativement longs ... Je suis ici ... Chine ... Chine ... étranger., Voyez s'il y a un débordement! </td>
</tr>
</ table>
</div>
<div id = "dragdiv2">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar2" style = "height: 22px; text-align: Left; background-color: # 547bc9; couleur: blanc; padding: 3px; curseur: move;">
<th align = "Left" Unselectable = "on"> title2 </th>
</tr>
<tr style = "hauteur: 130px; rembourrage: 3px;" align = "Left" valign = "top">
<td nonselectable = "on"> Content2 ... </td>
</tr>
</ table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv3">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar3" style = "height: 22px; text-align: Left; background-color: # 547bc9; couleur: blanc; padding: 3px; curseur: move;">
<th align = "Left" Unselectable = "ON"> Title3 </th>
</tr>
<tr style = "hauteur: 230px; rembourrage: 3px;" align = "Left" valign = "top">
<td nonselectable = "on"> Content3 ... </td>
</tr>
</ table>
</div>
</td>
<td valign = "top">
<div id = "dragdiv4">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar4" style = "height: 22px; text-align: Left; background-color: # 547bc9; couleur: blanc; padding: 3px; curseur: move;">
<th align = "Left" Unselectable = "ON"> Title4 </ Th>
</tr>
<tr style = "hauteur: 130px; rembourrage: 3px;" align = "Left" valign = "top">
<td nonselectable = "on"> Content4 ... </td>
</tr>
</ table>
</div>
<div id = "dragdiv5">
<table cellpadding = "0" cellpacing = "0">
<tr id = "titlebar5" style = "height: 22px; text-align: Left; background-color: # 547bc9; couleur: blanc; padding: 3px; curseur: move;">
<th align = "Left" Unselectable = "on"> title5 </th>
</tr>
<tr style = "hauteur: 130px; rembourrage: 3px;" align = "Left" valign = "top">
<td nonselectable = "on"> content5 ... </td>
</tr>
</ table>
</div>
</td>
</tr>
</ table>
</docy>
</html>
<br> <br> <hr> collecté sur Internet, uniquement pour l'échange d'intérêts et d'apprentissage, et non à des fins commerciales. </font> </p>
J'espère que cet article sera utile à la programmation JavaScript de tous.