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 相关文章推荐
五段实用的js高级技巧
Dec 20 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 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写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP 图像尺寸调整代码
2010/05/26 PHP
php学习之变量的使用
2011/05/29 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP7 新增功能
2021/03/09 PHP
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
使用python爬取B站千万级数据
2018/06/08 Python
python3转换code128条形码的方法
2019/04/17 Python
python实现单链表的方法示例
2019/09/03 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
初中物理教学反思
2014/01/14 职场文书
个人党性剖析材料
2014/02/03 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
保护环境的标语
2014/06/09 职场文书
信仰心得体会
2014/09/05 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
飞越疯人院观后感
2015/06/09 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书