JS仿iGoogle自定义首页模块拖拽特效的方法
本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法。分享给大家供大家参考。具体实现方法如下：
<!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>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>JS仿iGoogle自定义首页模块拖拽效果</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>
&
本文地址：https://www.stayed.cn/item/9414
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)