Méthode JS pour imiter les compétences de glisser-déposer du module de page d'accueil personnalisé d'iGoogle

L'exemple de cet article décrit comment utiliser JS pour imiter les effets glisser-déposer du module de page d'accueil personnalisé d'iGoogle. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

Copier le code Le code est le suivant : var Commun = { getEvent : function() {//ie/ff si (document.all) { fenêtre de retour.event; > func = getEvent.caller; while (func != null) { var arg0 = func.arguments[0]; si (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { retourner arg0; > > func = func.caller; > renvoie null ; }, getMousePos : fonction (ev) { si (!ev) { ev = this.getEvent(); > si (ev.pageX || ev.pageY) { revenir { x : ev.pageX, y : ev.pageY }; > if (document.documentElement && document.documentElement.scrollTop) { revenir { x : ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft, y : ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop }; > sinon si (document.body) { revenir { x : ev.clientX document.body.scrollLeft - document.body.clientLeft, y : ev.clientY document.body.scrollTop - document.body.clientTop }; > }, getElementPos : function(el) { el = this.getItself(el); var _x = 0, _y = 0; faire { _x = el.offsetLeft; _y = el.offsetTop; } while (el = el.offsetParent); return {x : _x, y : _y }; }, getItself : fonction (id) { return "string" == type d'identifiant ? 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.all ? 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 : function(parentObj, tagName) { si (Common.isIE) { return parentObj.firstChild; > sinon { var arr = parentObj.getElementsByTagName(tagName); retourner arr[0]; > }, lastChild : function(parentObj, tagName) { si (Common.isIE) { return parentObj.lastChild; > sinon { var arr = parentObj.getElementsByTagName(tagName); return arr[arr.length - 1]; > }, setCookie : fonction (nom, valeur) { document.cookie = nom "=" valeur; }, getCookie : fonction(nom) { var strCookie = document.cookie; var arrCookie = strCookie.split("; "); pour (var i = 0; i var arr = arrCookie[i].split("="); si (!arr[1]) { retourner ""; > if (arr[0] == nom) { retourner arr[1]; > > retourner ""; }, delCookie : fonction (nom) { var exp = nouvelle Date(); exp.setTime(exp.getTime() - 1); var cval = this.getCookie(nom); if (cval != null) document.cookie = name "=" cval ";expires=" exp.toGMTString(); > > var Classe = { créer : fonction() { return function() { this.init.apply(this, arguments); > > > var Drag = Class.create(); Faites glisser.prototype = { init : fonction (titleBar, dragDiv, Options) { //设置点击是否透明，默认透明60% titleBar = Common.getItself(titleBar); dragDiv = Common.getItself(dragDiv); this.dragArea = { maxLeft : -9999, maxRight : 9999, maxTop : -9999, maxBottom : 9999 }; si (Options) { this.opacity = Options.opacité ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100; si (Options.zone) { 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 }; > > sinon { 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 = fonction(e) { var ev = e || Common.getEvent(); // Autorisez-le uniquement à faire glisser le bouton gauche de la souris. Le bouton gauche de la souris est de 1 Firefox à 0 . Si (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) { } autre { return false ; }

// Gestion des situations particulières : si le DIV existant n'est pas touché lors du déplacement du haut/bas vers le haut, il reviendra en haut/bas de la colonne où il a été initialement glissé var tmpColId; pour (c = 0; c pour (k = 0; k Si (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) { tmpColId = c; pause; } } } 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], "DIV").offsetHeight };

//Enregistrez l'emplacement actuel de chaque conteneur qui peut être glissé et déposé dragObj.dragArray = dragObj.RegDragsPos(); //Insérer une case en pointillés var dashedElement = document.createElement("div"); dashedElement.style.cssText = dragDiv.style.cssText; dashedElement.style.border = " dashed 2px #aaa "; dashedElement.style.marginBottom = "6px"; dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px" ; // Soustraire la taille du corps pour que la taille de la boîte en pointillés reste cohérente avec celle de dragDiv dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) "px" ; //Ajouter un px pour garantir que FF est correct dashedElement.style.position = "relative"; Si (dragDiv.nextSibling) { dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling); } autre { dragDiv.parentNode.appendChild(dashedElement); } // Passage en absolu lors du glissement dragDiv.style.width = dragDiv.offsetWidth "px"; dragDiv.style.position = "absolute";

dragObj.moveable = 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(); } autre { window.captureEvents(Event.mousemove); }

dragObj.SetOpacity(dragDiv, dragObj.opacity); //FireFox supprime le problème du glissement des images dans les conteneurs if (ev.preventDefault) { ev.preventDefault(); ev.stopPropagation(); }

document.onmousemove = fonction(e) { Si (dragObj.moveable) { var ev = e || window.event || Common.getEvent(); //IE supprime le problème du glisser-déposer des images dans les conteneurs Si (document.all) //IE } 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; pour (var k = 0; k < dragObj.dragArray.length; k ) {

Si (dragDiv == dragObj.dragArray[i]) { continuer; if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x && movePos.y > dragObj.dragArray[k].PosTop && movePos.y ) { targetDiv = document.getElementById(dragObj.dragArray[k].DragId); if (movePos.y //往上移 dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; targetDiv.parentNode.insertBefore(dashedElement, targetDiv); > sinon { //往下移 dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; if (targetDiv.nextSibling) { targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling); > sinon { targetDiv.parentNode.appendChild(dashedElement); > > > > pour (j = 0; j var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x; if (movePos.x > startLeft && movePos.x ///列无DIV if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) { dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; dragTbl.rows[0].cells[j].appendChild(dashedElement); > sinon { var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV")); var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV")); //处理特殊情况：在最上/下面MOVE时不碰到现有DIV的情况下，又回到起始拖拽的列最上/下方 var tmpUp, tmpDown; if (tmpObj.colId == j) { depuis tmpDown = posLastChild.y Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight; if (movepos.y & lt; tmpup) {/// inséré dans le cadre en pointillés depuis le haut dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; dragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV")); à dashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; dragTbl.rows[0].cells[j].appendChild(dashedElement);

} > > > };

document.onmouseup = function() { if (dragObj.moveable) { si (Common.isIE) { dragDiv.releaseCapture(); > sinon { window.releaseEvents(dragDiv.mousemove); > dragObj.SetOpacity(dragDiv, 100); dragObj.moveable = false; dragObj.tmpX = 0; dragObj.tmpY = 0;

//务必写在此IF内 dragDiv.style.left = ""; dragDiv.style.top = "";

dragDiv.style.width = ""; dragDiv.style.position = ""; dashedElement.parentNode.insertBefore(dragDiv, dashedElement); dashedElement.parentNode.removeChild(dashedElement); >

};

} }, SetOpacity : function(dragDiv, n) { si (Common.isIE) { dragDiv.filters.alpha.opacity = n; > sinon { dragDiv.style.opacity = n/100; >

}, GetZindex : fonction() { var maxZindex = 0; var divs = document.getElementsByTagName("div"); pour (z = 0; z maxZindex = Math.max(maxZindex, divs[z].style.zIndex); > retourner maxZindex; }, RegDragsPos : fonction() { var arrDragDivs = new Array(); var dragTbl = document.getElementById("dragTable"); var tmpDiv, tmpPos; pour (i = 0; 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 }); > > retourner arrDragDivs; > >

window.onload = function() { var dragTbl = document.getElementById("dragTable"); if (Common.getCookie("configArr")) { var configArr = eval("(" Common.getCookie("configArr") ")"); pour (i = 0; i pour (j = 0; j dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j])); > > > nouveau Drag("titleBar1", "dragDiv1"); nouveau Drag("titleBar2", "dragDiv2"); nouveau Drag("titleBar3", "dragDiv3"); nouveau Drag("titleBar4", "dragDiv4"); nouveau Drag("titleBar5", "dragDiv5"); >

window.onunload = function() { var dragTbl = document.getElementById("dragTable"); var configArr = ""; pour (i = 0; i var tmpStr = ""; pour (j = 0; j tmpStr = (tmpStr == "" ? "" : ",") "'" dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'"; > configArr = (configArr == "" ? "" : ",") "[" tmpStr "]"; > //format comme : [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']] Common.setCookie("configArr", "[" configArr "]"); > .spanDiv{ position:relatif; largeur:5px; hauteur:5px; >

.dragDiv,.nodragDiv{ position:relatif; filtre:alpha(opacité=100); opacité:1; marge inférieure:6px; couleur d'arrière-plan :#FFFFFF; >

Title1 这里的字比较长....我来了....中国....中国...外国.，看一下有没有溢出> Title2 Content2... Titre3 Content3...

Méthode JS pour imiter les compétences de glisser-déposer du module de page d'accueil personnalisé d'iGoogle

Articles Liés