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中cookie的添加、取值、删除示例代码
Oct 21 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
jquery中each循环的简单回滚操作
May 05 jQuery
JS库之wow.js使用方法
Sep 14 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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
剖析 PHP 中的输出缓冲
2006/12/21 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
javascript各种复制代码收集
2008/09/20 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python ftp上传文件
2016/02/13 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python中static相关知识小结
2018/01/02 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python程序文件扩展名知识点详解
2020/02/27 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
致跳远、跳高运动员广播稿
2014/01/09 职场文书
倡议书格式
2014/08/30 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2015年售票员工作总结
2015/04/29 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
倡议书怎么写?
2019/04/11 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python