本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: JS仿iGoogle自定义首页模块拖拽效果 <br /> var Common = {<br /> getEvent: function() {//ie/ff<br /> if (document.all) {<br /> return window.event;<br /> }<br /> func = getEvent.caller;<br /> while (func != null) {<br /> var arg0 = func.arguments[0];<br /> if (arg0) {<br /> if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {<br /> return arg0;<br /> }<br /> }<br /> func = func.caller;<br /> }<br /> return null;<br /> },<br /> getMousePos: function(ev) {<br /> if (!ev) {<br /> ev = this.getEvent();<br /> }<br /> if (ev.pageX || ev.pageY) {<br /> return {<br /> x: ev.pageX,<br /> y: ev.pageY<br /> };<br /> } <p> if (document.documentElement && document.documentElement.scrollTop) {<br /> return {<br /> x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,<br /> y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop<br /> };<br /> }<br /> else if (document.body) {<br /> return {<br /> x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br /> y: ev.clientY + document.body.scrollTop - document.body.clientTop<br /> };<br /> }<br /> },<br /> getElementPos: function(el) {<br /> el = this.getItself(el);<br /> var _x = 0, _y = 0;<br /> do {<br /> _x += el.offsetLeft;<br /> _y += el.offsetTop;<br /> } while (el = el.offsetParent);<br /> return { x: _x, y: _y };<br /> },<br /> getItself: function(id) {<br /> return "string" == typeof id ? document.getElementById(id) : id;<br /> },<br /> 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) },<br /> isIE: document.all ? true : false,<br /> setOuterHtml: function(obj, html) {<br /> var Objrange = document.createRange();<br /> obj.innerHTML = html;<br /> Objrange.selectNodeContents(obj);<br /> var frag = Objrange.extractContents();<br /> obj.parentNode.insertBefore(frag, obj);<br /> obj.parentNode.removeChild(obj);<br /> },<br /> firstChild: function(parentObj, tagName) {<br /> if (Common.isIE) {<br /> return parentObj.firstChild;<br /> }<br /> else {<br /> var arr = parentObj.getElementsByTagName(tagName);<br /> return arr[0];<br /> }<br /> },<br /> lastChild: function(parentObj, tagName) {<br /> if (Common.isIE) {<br /> return parentObj.lastChild;<br /> }<br /> else {<br /> var arr = parentObj.getElementsByTagName(tagName);<br /> return arr[arr.length - 1];<br /> }<br /> },<br /> setCookie: function(name, value) {<br /> document.cookie = name + "=" + value;<br /> },<br /> getCookie: function(name) {<br /> var strCookie = document.cookie;<br /> var arrCookie = strCookie.split("; ");<br /> for (var i = 0; i < arrCookie.length; i++) {<br /> var arr = arrCookie[i].split("=");<br /> if (!arr[1]) {<br /> return "";<br /> }<br /> if (arr[0] == name) {<br /> return arr[1];<br /> }<br /> }<br /> return "";<br /> },<br /> delCookie: function(name) {<br /> var exp = new Date();<br /> exp.setTime(exp.getTime() - 1);<br /> var cval = this.getCookie(name);<br /> if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();<br /> }<br /> }<br /> var Class = {<br /> create: function() {<br /> return function() { this.init.apply(this, arguments); }<br /> }<br /> }<br /> var Drag = Class.create();<br /> Drag.prototype = {<br /> init: function(titleBar, dragDiv, Options) {<br /> //设置点击是否透明,默认透明60%<br /> titleBar = Common.getItself(titleBar);<br /> dragDiv = Common.getItself(dragDiv);<br /> this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };<br /> if (Options) {<br /> this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;<br /> if (Options.area) {<br /> if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };<br /> if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };<br /> if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };<br /> if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };<br /> }<br /> }<br /> else {<br /> this.opacity = 60;<br /> }<br /> this.originDragDiv = null;<br /> this.tmpX = 0;<br /> this.tmpY = 0;<br /> this.moveable = false;<br /> this.dragArray = []; <p> var dragObj = this;<br /> var dragTbl = document.getElementById("dragTable"); <p> titleBar.onmousedown = function(e) {<br /> var ev = e || window.event || Common.getEvent();<br /> //只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0<br /> if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {<br /> }<br /> else {<br /> return false;<br /> } <p> //处理特殊情况:在最上/下面MOVE时不碰到现有DIV的情况下,又回到起始拖拽的列最上/下方<br /> var tmpColId;<br /> for (c = 0; c < dragTbl.rows[0].cells.length; c++) {<br /> for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k++) {<br /> if (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {<br /> tmpColId = c;<br /> break;<br /> }<br /> }<br /> }<br /> var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));<br /> var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));<br /> var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y + Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight }; <p> //保存当前可拖拽各容器的所在位置<br /> dragObj.dragArray = dragObj.RegDragsPos(); <p> //插入虚线框<br /> var dashedElement = document.createElement("div");<br /> dashedElement.style.cssText = dragDiv.style.cssText;<br /> dashedElement.style.border = " dashed 2px #aaa ";<br /> dashedElement.style.marginBottom = "6px";<br /> dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //减去boderWidth使虚线框大小保持与dragDiv一致<br /> dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //加上px 保证FF正确 <br /> dashedElement.style.position = "relative";<br /> if (dragDiv.nextSibling) {<br /> dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling);<br /> }<br /> else {<br /> dragDiv.parentNode.appendChild(dashedElement);<br /> }<br /> //拖动时变为absolute<br /> dragDiv.style.width = dragDiv.offsetWidth + "px";<br /> dragDiv.style.position = "absolute"; <p><br /> dragObj.moveable = true;<br /> dragDiv.style.zIndex = dragObj.GetZindex() + 1; <p> var downPos = Common.getMousePos(ev);<br /> dragObj.tmpX = downPos.x - dragDiv.offsetLeft;<br /> dragObj.tmpY = downPos.y - dragDiv.offsetTop; <p> if (Common.isIE) {<br /> dragDiv.setCapture();<br /> } else {<br /> window.captureEvents(Event.mousemove);<br /> } <p> dragObj.SetOpacity(dragDiv, dragObj.opacity); <p> //FireFox 去除容器内拖拽图片问题<br /> if (ev.preventDefault) {<br /> ev.preventDefault();<br /> ev.stopPropagation();<br /> } <p> document.onmousemove = function(e) {<br /> if (dragObj.moveable) {<br /> var ev = e || window.event || Common.getEvent();<br /> //IE 去除容器内拖拽图片问题<br /> if (document.all) //IE<br /> {<br /> ev.returnValue = false;<br /> } <p> var movePos = Common.getMousePos(ev);<br /> dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px";<br /> dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px"; <p> var targetDiv = null;<br /> for (var k = 0; k < dragObj.dragArray.length; k++) {<br /> if (dragDiv == dragObj.dragArray[i]) {<br /> continue;<br /> } <p> if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x < dragObj.dragArray[k].PosLeft + dragObj.dragArray[k].PosWidth<br /> && movePos.y > dragObj.dragArray[k].PosTop && movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight<br /> ) {<br /> targetDiv = document.getElementById(dragObj.dragArray[k].DragId);<br /> if (movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight / 2) {<br /> //往上移<br /> dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";<br /> targetDiv.parentNode.insertBefore(dashedElement, targetDiv);<br /> }<br /> else {<br /> //往下移<br /> dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";<br /> if (targetDiv.nextSibling) {<br /> targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling);<br /> }<br /> else {<br /> targetDiv.parentNode.appendChild(dashedElement);<br /> }<br /> }<br /> }<br /> }<br /> <br /> for (j = 0; j < dragTbl.rows[0].cells.length; j++) {<br /> var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x;<br /> if (movePos.x > startLeft && movePos.x < startLeft + dragTbl.rows[0].cells[j].offsetWidth) {<br /> ///列无DIV<br /> if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) {<br /> dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";<br /> dragTbl.rows[0].cells[j].appendChild(dashedElement);<br /> }<br /> else {<br /> var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));<br /> var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV"));<br /> //处理特殊情况:在最上/下面MOVE时不碰到现有DIV的情况下,又回到起始拖拽的列最上/下方<br /> var tmpUp, tmpDown;<br /> if (tmpObj.colId == j) {<br /> tmpUp = tmpObj.firstChildUp;<br /> tmpDown = tmpObj.lastChildDown;<br /> }<br /> else {<br /> tmpUp = posFirstChild.y;<br /> tmpDown = posLastChild.y + Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight;<br /> } <p> if (movePos.y < tmpUp) {///从最上面插入虚线框<br /> dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";<br /> dragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV"));<br /> }<br /> else if (movePos.y > tmpDown) {///从最下面插入虚线框<br /> dashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px";<br /> dragTbl.rows[0].cells[j].appendChild(dashedElement);<br /> } <p> }<br /> }<br /> }<br /> }<br /> }; <p> document.onmouseup = function() {<br /> if (dragObj.moveable) {<br /> if (Common.isIE) {<br /> dragDiv.releaseCapture();<br /> }<br /> else {<br /> window.releaseEvents(dragDiv.mousemove);<br /> }<br /> dragObj.SetOpacity(dragDiv, 100);<br /> dragObj.moveable = false;<br /> dragObj.tmpX = 0;<br /> dragObj.tmpY = 0; <p> //务必写在此IF内<br /> dragDiv.style.left = "";<br /> dragDiv.style.top = ""; <p> dragDiv.style.width = "";<br /> dragDiv.style.position = ""; <br /> dashedElement.parentNode.insertBefore(dragDiv, dashedElement);<br /> dashedElement.parentNode.removeChild(dashedElement);<br /> } <p> }; <p> }<br /> },<br /> SetOpacity: function(dragDiv, n) {<br /> if (Common.isIE) {<br /> dragDiv.filters.alpha.opacity = n;<br /> }<br /> else {<br /> dragDiv.style.opacity = n / 100;<br /> } <p> },<br /> GetZindex: function() {<br /> var maxZindex = 0;<br /> var divs = document.getElementsByTagName("div");<br /> for (z = 0; z < divs.length; z++) {<br /> maxZindex = Math.max(maxZindex, divs[z].style.zIndex);<br /> }<br /> return maxZindex;<br /> },<br /> RegDragsPos: function() {<br /> var arrDragDivs = new Array();<br /> var dragTbl = document.getElementById("dragTable");<br /> var tmpDiv, tmpPos;<br /> for (i = 0; i < dragTbl.getElementsByTagName("div").length; i++) {<br /> tmpDiv = dragTbl.getElementsByTagName("div")[i];<br /> if (tmpDiv.className == "dragDiv") {<br /> tmpPos = Common.getElementPos(tmpDiv);<br /> arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight });<br /> }<br /> }<br /> return arrDragDivs;<br /> }<br /> } <p> window.onload = function() {<br /> var dragTbl = document.getElementById("dragTable");<br /> if (Common.getCookie("configArr")) {<br /> var configArr = eval("(" + Common.getCookie("configArr") + ")");<br /> for (i = 0; i < dragTbl.rows[0].cells.length; i++) {<br /> for (j = 0; j < configArr[i].length; j++) {<br /> dragTbl.rows[0].cells[i].appendChild(document.getElementById(configArr[i][j]));<br /> }<br /> }<br /> }<br /> new Drag("titleBar1", "dragDiv1");<br /> new Drag("titleBar2", "dragDiv2");<br /> new Drag("titleBar3", "dragDiv3");<br /> new Drag("titleBar4", "dragDiv4");<br /> new Drag("titleBar5", "dragDiv5");<br /> } <p> window.onunload = function() {<br /> var dragTbl = document.getElementById("dragTable");<br /> var configArr = "";<br /> for (i = 0; i < dragTbl.rows[0].cells.length; i++) {<br /> var tmpStr = "";<br /> for (j = 0; j < dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length; j++) {<br /> tmpStr += (tmpStr == "" ? "" : ",") + "'" + dragTbl.rows[0].cells[i].getElementsByTagName("DIV")[j].id + "'";<br /> }<br /> configArr += (configArr == "" ? "" : ",") + "[" + tmpStr + "]";<br /> }<br /> //format like: [['dragDiv3','dragDiv5'],['dragDiv4','dragDiv1'],['dragDiv2']]<br /> Common.setCookie("configArr", "[" + configArr + "]"); <br /> }<br /> <br /> .spanDiv{<br /> position:relative;<br /> width:5px;<br /> height:5px;<br /> } <p> .dragDiv,.nodragDiv{<br /> position:relative;<br /> filter:alpha(opacity=100);<br /> opacity:1;<br /> margin-bottom:6px;<br /> background-color:#FFFFFF;<br /> }<br /> <p> Title1 这里的字比较长....我来了....中国....中国...外国.,看一下有没有溢出> Title2 Content2... Title3 Content3...