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 实现子父窗体互相传值的简单实例
Feb 17 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
node+multer实现图片上传的示例代码
Feb 18 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
python SVM 线性分类模型的实现
2019/07/19 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
如何表示python中的相对路径
2020/07/08 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
剪枝的学问教学反思
2014/02/07 职场文书
党员教师工作决心书
2014/03/13 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
体育专业求职信
2014/07/16 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2015最新民情日记范文
2015/06/26 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
vue选项卡切换的实现案例
2022/04/11 Vue.js