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 相关文章推荐
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
EasyUI学习之Combobox级联下拉列表(2)
Dec 29 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
浅析JavaScript 函数防抖和节流
Jul 13 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 错误处理经验分享
2011/10/11 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php目录拷贝实现方法
2015/07/10 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
马来西亚在线购物:POPLOOK.com
2019/12/09 全球购物
一年级数学教学反思
2014/02/01 职场文书
护士先进个人总结
2015/02/13 职场文书
销售辞职信范文
2015/03/02 职场文书
客户答谢会致辞
2015/07/30 职场文书