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实现的页内搜索代码
May 23 Javascript
JS版网站风格切换实例代码
Oct 06 Javascript
jquery maxlength使用说明
Sep 09 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JavaScript模仿Pinterest实现图片预加载功能
Oct 25 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
vue-iview动态新增和删除的方法
Jun 17 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 前一天或后一天的日期
2008/06/28 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
2012/05/23 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
python批量提取word内信息
2015/08/09 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
在keras里实现自定义上采样层
2020/06/28 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python如何快速拼接字符串
2020/10/28 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
病媒生物防治方案
2014/05/13 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
给校长的一封检讨书
2014/09/20 职场文书
党员个人对照检查材料
2014/10/01 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
经验交流材料格式
2014/12/30 职场文书
公务员个人总结
2015/02/12 职场文书
导游词之无锡唐城
2019/12/12 职场文书
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python