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 easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
vue组件name的作用小结
May 23 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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
计数器详细设计
2006/10/09 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Python 错误和异常小结
2013/10/09 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
Python列表list排列组合操作示例
2018/12/18 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python中如何进行连乘计算
2020/05/28 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
咖啡书吧创业计划书
2014/01/13 职场文书
毕业证丢失证明
2014/01/15 职场文书
开学寄语大全
2014/04/08 职场文书
青春励志演讲稿
2014/04/29 职场文书
访谈节目策划方案
2014/05/15 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
iPhone13再次曝光
2021/04/15 数码科技
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL