JS method to imitate iGoogle custom home page module drag and drop effects_javascript skills

The example in this article describes how to use JS to imitate iGoogle’s custom home page module drag and drop effects. Share it with everyone for your reference. The specific implementation method is as follows:

Copy code The code is as follows: JS仿iGoogle自定义首页模块拖拽效果 var Common = { 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) == "object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } } func = func.caller; } return null; }, getMousePos: function(ev) { if (!ev) { ev = this.getEvent(); } if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } if (document.documentElement && document.documentElement.scrollTop) { return { x: ev.clientX document.documentElement.scrollLeft - document.documentElement.clientLeft, y: ev.clientY document.documentElement.scrollTop - document.documentElement.clientTop }; } else if (document.body) { return { 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; do { _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.all ? true : false, 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: function(parentObj, tagName) { if (Common.isIE) { return parentObj.firstChild; } else { var arr = parentObj.getElementsByTagName(tagName); return arr[0]; } }, lastChild: function(parentObj, tagName) { if (Common.isIE) { return parentObj.lastChild; } else { var arr = parentObj.getElementsByTagName(tagName); return arr[arr.length - 1]; } }, setCookie: function(name, value) { document.cookie = name "=" value; }, getCookie: function(name) { var strCookie = document.cookie; var arrCookie = strCookie.split("; "); for (var i = 0; i var arr = arrCookie[i].split("="); if (!arr[1]) { return ""; } if (arr[0] == name) { return arr[1]; } } return ""; }, delCookie: function(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = this.getCookie(name); 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) { //设置点击是否透明，默认透明60% titleBar = Common.getItself(titleBar); dragDiv = Common.getItself(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 }; } } else { 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(); // Only allow it to drag through the left mouse button. The left mouse button is 1 firefox to 0 If (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) { } else { return false; }

// Handling special situations: If the existing DIV is not touched when moving from the top/bottom to the top, it will return to the top/bottom of the column where it was originally dragged var tmpColId; for (c = 0; c for (k = 0; k If (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) { tmpColId = c; break; } } } 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 };

//Save the current location of each container that can be dragged and dropped dragObj.dragArray = dragObj.RegDragsPos(); //Insert a dotted box 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"; //Subtract the bodyWidth to keep the dashed box size consistent with the dragDiv dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) "px"; //Add px to ensure FF is correct dashedElement.style.position = "relative"; If (dragDiv.nextSibling) { dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling); } else { dragDiv.parentNode.appendChild(dashedElement); } //Change to absolute when dragging 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(); } else { window.captureEvents(Event.mousemove); }

dragObj.SetOpacity(dragDiv, dragObj.opacity); //FireFox removes the problem of dragging images in containers if (ev.preventDefault) { ev.preventDefault(); ev.stopPropagation(); }

document.onmousemove = function(e) { If (dragObj.moveable) { var ev = e || window.event || Common.getEvent(); //IE removes the problem of dragging images within containers If (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; for (var k = 0; k < dragObj.dragArray.length; k ) {

If (dragDiv == dragObj.dragArray[i]) { continue; 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); } else { //往下移 dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) "px"; if (targetDiv.nextSibling) { targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling); } else { targetDiv.parentNode.appendChild(dashedElement); } } } } for (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); } else { 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) { since tmpDown = posLastChild.y Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight; if (movepos.y & lt; tmpup) {/// inserted into the dotted frame from the top 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")); to 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) { if (Common.isIE) { dragDiv.releaseCapture(); } else { 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) { if (Common.isIE) { dragDiv.filters.alpha.opacity = n; } else { dragDiv.style.opacity = n / 100; }

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

window.onload = function() { var dragTbl = document.getElementById("dragTable"); if (Common.getCookie("configArr")) { var configArr = eval("(" Common.getCookie("configArr") ")"); for (i = 0; i for (j = 0; 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 = ""; for (i = 0; i var tmpStr = ""; for (j = 0; j tmpStr = (tmpStr == "" ? "" : ",") "'" dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id "'"; } configArr = (configArr == "" ? "" : ",") "[" tmpStr "]"; } //format like: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']] Common.setCookie("configArr", "[" configArr "]"); } .spanDiv{ position:relative; width:5px; height:5px; }

.dragDiv,.nodragDiv{ position:relative; filter:alpha(opacity=100); opacity:1; margin-bottom:6px; background-color:#FFFFFF; }

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

JS method to imitate iGoogle custom home page module drag and drop effects_javascript skills

Related articles