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 10 Javascript
跨域表单提交状态的变相判断代码
Nov 12 Javascript
js parsefloat parseint 转换函数
Jan 21 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
基于Python的接口测试框架实例
2016/11/04 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python绘制圆柱体的方法
2018/07/02 Python
python编程使用协程并发的优缺点
2018/09/20 Python
实例介绍Python中整型
2019/02/11 Python
python3 map函数和filter函数详解
2019/08/26 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
工作收入住址证明
2014/10/28 职场文书
民事上诉状范文
2015/05/22 职场文书
月考总结与反思
2015/10/22 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js