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 相关文章推荐
arguments对象
Nov 20 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
详解Javascript实践中的命令模式
May 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
如何将python中的List转化成dictionary
2016/08/15 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
商务考察邀请函模板
2015/02/02 职场文书
考试没考好检讨书
2015/05/06 职场文书