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框架(Javascript Framework)
Nov 22 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
JS中的多态实例详解
Oct 15 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
前端JavaScript大管家 package.json
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
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
深入浅析JavaScript中的3DES
2016/08/24 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
Python的Django框架安装全攻略
2015/07/15 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
大学生入党思想汇报
2014/01/01 职场文书
开业主持词
2014/03/21 职场文书
预备党员承诺书
2014/03/25 职场文书
竞选村长演讲稿
2014/04/28 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Python 中的 copy()和deepcopy()
2021/11/07 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技