IE/FireFox具备兼容性的拖动代码


Posted in Javascript onAugust 13, 2007

特点:
1、兼容 IE6、FF、Opear(IE7还没有机会测试)
2、拖动流畅
3、起点与终点之间有过渡,使移动更平滑(可调)

演示

/*
    Author:misshjn
    HomePage:http://www.happyshow.org
    Date:2007-04-30

    拖动开始
*/
function _getStyle(element,styleProp){
    if (element.currentStyle){
        var y = element.currentStyle[styleProp];
    }else if (window.getComputedStyle){
        var y = document.defaultView.getComputedStyle(element,null).getPropertyValue(styleProp.replace(/([A-Z])/g,"-$1").toLowerCase());
    }
    return y;
}
function _elementOnmouseDown(evt,blockID){
    var obj, temp;
    obj=document.getElementById(blockID);
    var x = evt.clientX || evt.pageX;
    var y = evt.clientY || evt.pageY;
    obj.startX=x-obj.offsetLeft;
    obj.startY=y-obj.offsetTop;

    var d = document.createElement("div");
    d.style.position = "absolute";
    d.style.width = obj.clientWidth + parseInt(_getStyle(obj,"borderLeftWidth"),10) + parseInt(_getStyle(obj,"borderRightWidth")) -2 + "px";
    d.style.height = obj.clientHeight + parseInt(_getStyle(obj,"borderTopWidth"),10) + parseInt(_getStyle(obj,"borderBottomWidth")) -2 + "px";
    d.style.border = "1px dashed #666";
    d.style.top = _getStyle(obj,"top");
    d.style.left = _getStyle(obj,"left");
    d.style.zIndex = "9999";
    document.body.appendChild(d);
    document.onmousemove=function(evt){
        d.style.left= (evt?evt.pageX:event.clientX) - obj.startX + "px";
        d.style.top= (evt?evt.pageY:event.clientY) - obj.startY + "px";
    };
    document.onmouseup=function(){
        var objL = parseInt(_getStyle(obj,"left"),10);
        var objT = parseInt(_getStyle(obj,"top"),10);
        var obj2L = parseInt(d.style.left,10);
        var obj2T = parseInt(d.style.top,10);

        var todolist = [];
        var level = 10;  //元素移动从起点到终点之间过渡的级数,大于0的整数
        var speed = 10; //毫秒,每次移动的间隔时间,数字越大,动画感越强,但跳跃感也越大
        for (i=1; i<=level; i++){
            todolist.push(function(t){
                setTimeout(function(){
                    obj.style.left = objL + (obj2L-objL)*(t/level) + "px";
                    obj.style.top = objT + (obj2T-objT)*(t/level) + "px";
                    if(t==i)todolist=null;
                },speed*arguments[0]);
            });
        }
        for (i=1; i<=level; i++){
            todolist[i-1](i);
        }
        document.body.removeChild(d);
        document.onmousemove = null;
        document.onmouseup = null;
    };
}

/*
    拖动结束
*/

Javascript 相关文章推荐
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
JavaScript 编程引入命名空间的方法与代码
Aug 13 #Javascript
权威JavaScript 中的内存泄露模式
Aug 13 #Javascript
封装好的省市地区联动控件附下载
Aug 13 #Javascript
分享别人写的一个小型js框架
Aug 13 #Javascript
javascript下查找父节点的简单方法
Aug 13 #Javascript
根据地区不同显示时间的javascript代码
Aug 13 #Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 #Javascript
You might like
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
浅谈nuxtjs校验登录中间件和混入(mixin)
2020/11/06 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python中常见的异常总结
2018/02/20 Python
Python中psutil的介绍与用法
2019/05/02 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
C语言编程题
2015/03/09 面试题
财务人员个人自荐信范文
2013/09/26 职场文书
会计自荐书
2013/12/02 职场文书
会计与审计毕业生自荐信范文
2013/12/30 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript