繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个很酷的拖动层的js类，兼容IE及Firefox
- Javascript
- 兼容firefox的文本框只能输入两位小数的数字的代码
- javascript 年月日联动实现核心代码
- JavaScript 图片预览效果 推荐
- JavaScript是否可实现多线程 深入理解JavaScript定时机制
- jquery 表单取值常用代码
- javaScript 删除确认实现方法小结
- javascript强制弹出新窗口实现代码
- Js倒计时代码，当鼠标离开页面与回到页面会自动停止与开始
- Div+Js实现的带阴影菜单 微软以前网站曾用过
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- JavaScript 未知高度元素垂直居中实现代码
- javascript 仿开心网好友印象功能(点击文字弹出印象框)
- JS+CSS实现的一种交互体验 表单页面
- js 效率组装字符串 StringBuffer
- window.js 主要包含了页面的一些操作
- 关于Aptana Studio生成自动备份文件的解决办法
- javascript下arguments,caller,callee,call,apply示例及理解
- HTA版JSMin（省略修饰语若干）基于javascript语言编写
- CSS+Jquery实现页面圆角框方法大全
- js 页面刷新location.reload和location.replace的区别小结
Javascript 中的 一个很酷的拖动层的js类，兼容IE及Firefox
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 245 ::
收藏到网摘: n/a
自己优化修改了网上的一个JS拖动类，增加了拖动时显示半透明的特效。
自己优化修改了网上的一个JS拖动类，增加了拖动时显示半透明的特效。 http://www.ruanchen.com/"http://www.ruanchen.com/" style="color: #000">http://www.ruanchen.com/"codetitle">复制代码 代码如下:
//*********************************移动层 函数 开始*******************************************
//生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,arr[0]表示拖动层,arr[1]表示整体)
//new divDrag(['test'], [getObject('test31'),getObject('test3')], getObject('test1') ,getObject('test2') ,[getObject('test41'),getObject('test4')]);
//记得有拖动属性的层position:absolute;
Array.prototype.extend = function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
function divDrag()
{
var A,B,gCn;
var zIndex = 1;
this.dragStart = function(e)
{
e = e||window.event;
if((e.which && (e.which!=1))||(e.button && (e.button!=1))){return;}
var pos = this.gPos;
gCn = this.parent||this;
if(document.defaultView)
{
_top = document.defaultView.getComputedStyle(gCn,null).getPropertyValue("top");
_left = document.defaultView.getComputedStyle(gCn,null).getPropertyValue("left");
}
else
{
if(gCn.currentStyle)
{
_top = gCn.currentStyle["top"];
_left = gCn.currentStyle["left"];
}
}
pos.ox = (e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
pos.oy = (e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
if(!!A)
{
if(document.removeEventListener)
{
document.removeEventListener("mousemove",A,false);
document.removeEventListener("mouseup",B,false);
}
else
{
document.detachEvent("onmousemove",A);
document.detachEvent("onmouseup",B);
}
}
A = this.dragMove.create(this);
B = this.dragEnd.create(this);
if(document.addEventListener)
{
document.addEventListener("mousemove",A,false);
document.addEventListener("mouseup",B,false);
}
else
{
document.attachEvent("onmousemove",A);
document.attachEvent("onmouseup",B);
}
gCn.style.zIndex = (++zIndex);
}
this.dragMove = function(e)
{
e = e||window.event;
var pos = this.gPos;
gCn = this.parent||this;
gCn.style.top = (e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
gCn.style.left = (e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
try{if(CMInfo.Bs_Name=='IE'){gCn.style.filter = "alpha(opacity=70)";}else{gCn.style.opacity = "0.7";}}catch(e){}
this.stop(e);
}
this.dragEnd = function(e)
{
var pos = this.gPos;
e = e||window.event;
if((e.which && (e.which!=1))||(e.button && (e.button!=1))){return};
gCn = this.parent||this;
if(!!(this.parent)){this.style.backgroundColor = pos.color;}
try{if(CMInfo.Bs_Name=='IE'){gCn.style.filter = "alpha(opacity=100)";}else{gCn.style.opacity = 1;}}catch(e){}
if(document.removeEventListener)
{
document.removeEventListener("mousemove",A,false);
document.removeEventListener("mouseup",B,false);
}
else
{
document.detachEvent("onmousemove",A);
document.detachEvent("onmouseup",B);
}
A = null;
B = null;
gCn.style.zIndex = (++zIndex);
this.stop(e);
}
this.shiftColor = function()
{
this.style.backgroundColor="#EEEEEE";
}
this.position = function (e)
{
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
return {x:l,y:t,ox:0,oy:0,color:null}
}
this.stop = function(e)
{
if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
if(e.preventDefault){e.preventDefault();}else{e.returnValue=false;}
}
this.create = function(bind)
{
var B = this;
var A = bind;
return function(e){return B.apply(A,[e]);}
}
this.dragStart.create = this.create;
this.dragMove.create = this.create;
this.dragEnd.create = this.create;
this.shiftColor.create = this.create;
this.initialize = function()
{
for(var A=0,B=arguments.length;A<B;A++)
{
C=arguments[A];
if(!(C.push)){C = [C];}
gC = (typeof(C[0])=='object')?C[0]:(typeof(C[0])=='string'?getObject(C[0]):null);
if(!gC){continue};
gC.gPos = this.position(gC);
gC.dragMove = this.dragMove;
gC.dragEnd = this.dragEnd;
gC.stop = this.stop;
if(!!C[1])
{
gC.parent = C[1];
gC.gPos.color = gC.style.backgroundColor;
}
if(gC.addEventListener)
{
gC.addEventListener("mousedown",this.dragStart.create(gC),false);
if(!!C[1]){gC.addEventListener("mousedown",this.shiftColor.create(gC),false); }
}
else
{
gC.attachEvent("onmousedown",this.dragStart.create(gC));
if(!!C[1]){gC.attachEvent("onmousedown",this.shiftColor.create(gC));}
}
}
}
this.initialize.apply(this,arguments);
}
//*********************************移动层 函数 结束*******************************************
评论 (0) 