一个很酷的拖动层的js类,兼容IE及Firefox


Posted in Javascript onJune 23, 2009

自己优化修改了网上的一个JS拖动类,增加了拖动时显示半透明的特效。 https://3water.com/article/16122.htm
注意,本文类中的Cminfo类请 查看:
https://3water.com/article/18760.htm

//*********************************移动层 函数 开始******************************************* 
//生成拖动层很简单,只需要(参数之一如果是数组表示局部拖动,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); 
} 
//*********************************移动层 函数 结束*******************************************
Javascript 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
jQuery实现全选按钮
Jan 01 jQuery
一些常用的JS功能函数代码
Jun 23 #Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 #Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 #Javascript
IE JS编程需注意的内存释放问题
Jun 23 #Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 #Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 #Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 #Javascript
You might like
getimagesize获取图片尺寸实例
2014/11/15 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
Javascript Select操作大集合
2009/05/26 Javascript
JQuery小知识
2010/10/15 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
详解Python中的正则表达式的用法
2015/04/09 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
捐款仪式主持词
2015/07/04 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python