据说是Google首页的网页模块拖动代码

更新时间：2010年09月19日 20:30:31 作者：

据说是Google首页的网页模块拖动代码，Google很早就应用了网页拖动特效，不知大家发现没？本款拖动特效可以说是完全模仿了Google的拖动代码，比较有代表性，因此也很有参考价值，奉献给大家，仅供参考。

<!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" > <head> <title>据说是Google首页的网页模块拖动代码</title> <script type="text/javascript"> 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 < arrCookie.length; 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(); //只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0 if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) { } else { return false; } //处理特殊情况：在最上/下面MOVE时不碰到现有DIV的情况下，又回到起始拖拽的列最上/下方 var tmpColId; for (c = 0; c < dragTbl.rows[0].cells.length; c++) { for (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; 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 }; //保存当前可拖拽各容器的所在位置 dragObj.dragArray = dragObj.RegDragsPos(); //插入虚线框 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"; //减去boderWidth使虚线框大小保持与dragDiv一致 dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //加上px 保证FF正确 dashedElement.style.position = "relative"; if (dragDiv.nextSibling) { dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling); } else { dragDiv.parentNode.appendChild(dashedElement); } //拖动时变为absolute 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 去除容器内拖拽图片问题 if (ev.preventDefault) { ev.preventDefault(); ev.stopPropagation(); } document.onmousemove = function(e) { if (dragObj.moveable) { var ev = e || window.event || Common.getEvent(); //IE 去除容器内拖拽图片问题 if (document.all) //IE { 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; for (var k = 0; k < dragObj.dragArray.length; k++) { if (dragDiv == dragObj.dragArray[i]) { continue; } 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].DragId); if (movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight / 2) { //往上移 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 < 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) { ///列无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) { tmpUp = tmpObj.firstChildUp; tmpDown = tmpObj.lastChildDown; } else { tmpUp = posFirstChild.y; tmpDown = posLastChild.y + Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight; } if (movePos.y < tmpUp) {///从最上面插入虚线框 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")); } else if (movePos.y > tmpDown) {///从最下面插入虚线框 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 < divs.length; 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 < dragTbl.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 }); } } return arrDragDivs; } } window.onload = function() { var dragTbl = document.getElementById("dragTable"); if (Common.getCookie("configArr")) { var configArr = eval("(" + Common.getCookie("configArr") + ")"); for (i = 0; i < dragTbl.rows[0].cells.length; i++) { for (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 = ""; for (i = 0; i < dragTbl.rows[0].cells.length; i++) { var tmpStr = ""; for (j = 0; j < dragTbl.rows[0].cells[i].getElementsByTagName("DIV").length; 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 + "]"); } </script> <style type="text/css"> .spanDiv{ position:relative; width:5px; height:5px; } .dragDiv,.nodragDiv{ position:relative; filter:alpha(opacity=100); opacity:1; margin-bottom:6px; background-color:#FFFFFF; } </style> </head> <body > <script type="text/javascript"> </script> <table id="dragTable" cellpadding="3" style=" border:solid 0px green;width:98%;"> <tr> <td valign="top" style="width:30%"> <div class="dragDiv" id="dragDiv1" > <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar1" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title1</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" > <td unselectable="on">这里的字比较长....我来了....中国....中国...外国.，看一下有没有溢出></td> </tr> </table> </div> <div class="dragDiv" id="dragDiv2"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title2</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" > <td unselectable="on">Content2...</td> </tr> </table> </div> </td> <td valign="top" style="width:50%"> <div class="dragDiv" id="dragDiv3"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title3</th> </tr> <tr style="height:230px;padding:3px;" align="left" valign="top" > <td unselectable="on">Content3...</td> </tr> </table> </div> </td> <td valign="top" style="width:20%"> <div class="dragDiv" id="dragDiv4"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title4</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" > <td unselectable="on">Content4...</td> </tr> </table> </div> <div class="dragDiv" id="dragDiv5"> <table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> <tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> <th align="left" unselectable="on" >Title5</th> </tr> <tr style="height:130px;padding:3px;" align="left" valign="top" > <td unselectable="on">Content5...</td> </tr> </table> </div> </td> </tr> </table> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

基于jQuery实现下拉收缩(展开与折叠)特效
jQuery下拉收缩特效，点击下边那个按钮，就可实现下拉的效果，也叫展开与折叠的效果，使用了jQuery插件，如何不习惯使用jquery插件的朋友当然使用纯Js也能实现哦，但是jquery现在这么流行，值得学习一下哦
2012-12-12
代码非常简洁且兼容多浏览器的拖动层实现代码
代码非常简洁且兼容多浏览器的拖动层的实现代码，需要的朋友可以参考下。
2011-01-01
js隔行变色、鼠标划过变色代码
隔行变色、鼠标划过变色代码，已经有不少类似的代码了，出于学习的态度，再发一个，因为每个隔行换色的写法不同。
2010-10-10
js最简单的拖拽效果实现代码
说到拖拽功能，现在各大，中，小型网站都基本上有类似的东西，特别是对弹出层拖拽，更是常见的一塌糊涂。。。
2010-09-09
可在线编辑网页文字效果代码(单击)
可在线编辑网页文字效果代码，点击即可编辑文字，喜欢的朋友可以参考下
2013-03-03
Tips 带三角可关闭的文字提示
多功能Tips，带小三角的文字提示，可关闭，有两套颜色方案可选择，可按你的要求将显示框定义显示在四个方向，放大或缩小浏览器窗口，不会有丝毫偏差。
2010-10-10
js点击弹出div层实现可拖曳的弹窗效果
点击文字，弹出一个窗口，其实是一个弹出层，这个弹出层可以随鼠标拖曳，很炫的哦，另外，示例演示了用本方法弹出文字层和弹出图片层的具体代码，请根据选择使用哦，感兴趣的朋友可以研究下
2012-12-12
xScrollStick 跟随滚动条漂浮的JS特效
这是一个跟随滚动条漂浮的JS特效，就是说滚动条滚动而元素相对屏幕位置不变，需要的朋友可以测试下
2012-04-04
JS实现用键盘控制DIV上下左右+放大缩小与变色
用键盘控制DIV，红色方块为键盘操作区域，您可以进行如下操作:左右控制;背景变为绿色;背景变为黄色;背景变为蓝色放大或缩小
2012-12-12
带你快速上手前端响应式布局与Bootstrap栅格系统
这篇文章带你快速上手前端响应式布局与Bootstrap栅格系统,响应式布局主要是针对各种不同尺寸的屏幕兼容性问题,需要的朋友可以参考下
2023-03-03

据说是Google首页的网页模块拖动代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具