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的设计模式
Nov 22 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
jquery的live使用注意事项
Feb 18 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 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+MYSQL 出现乱码的解决方法
2008/08/08 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JavaScript内核之基本概念
2011/10/21 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python 函数基础知识汇总
2018/03/09 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
如何用Python 加密文件
2020/09/10 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
学生爱国演讲稿
2014/01/14 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
搬迁通知
2015/04/20 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL