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版本的代码
Sep 03 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
2017/02/21 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python素数筛选法浅析
2018/03/19 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
pandas 将索引值相加的方法
2018/11/15 Python
基于python的opencv图像处理实现对斑马线的检测示例
2020/11/29 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
《雨霖铃》听课反思
2014/02/13 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
火锅店营销方案
2014/02/26 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
一文搞懂MySQL索引页结构
2022/02/28 MySQL
vue打包时去掉所有的console.log
2022/04/10 Vue.js