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的获取mouse坐标插件的实现代码
Apr 01 Javascript
Exjs 入门篇
Apr 07 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
vue实现登录功能
Dec 31 Vue.js
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/02 国漫
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
简单的php中文转拼音的实现代码
2014/02/11 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
jQuery 动画基础教程
2008/12/25 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
2017/06/19 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
工商治理实习生的自我评价
2014/01/15 职场文书
团队激励口号
2014/06/06 职场文书
催款律师函范文
2015/05/27 职场文书
仰望星空观后感
2015/06/10 职场文书