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 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
浅谈JS的原型和继承
May 08 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
vue点击页面空白处实现保存功能
Nov 06 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
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python从零开始创建区块链
2018/03/06 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python重新加载模块的实现方法
2018/10/16 Python
Django框架 信号调度原理解析
2019/09/04 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
介绍一下except的用法和作用
2015/01/22 面试题
关于环保的建议书400字
2014/03/12 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python