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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP 动态随机生成验证码类代码
2010/04/09 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
php实现插入排序
2015/03/29 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
javascript import css实例代码
2008/07/18 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
Python实现单词拼写检查
2015/04/25 Python
Python线程指南详细介绍
2017/01/05 Python
Python批量发送post请求的实现代码
2018/05/05 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Django models.py应用实现过程详解
2019/07/29 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
社会实践活动总结范文
2014/07/03 职场文书
民族学专业求职信
2014/07/28 职场文书
技能培训通讯稿
2015/07/18 职场文书