作为一个马上要找工作、非计算机专业、热爱前端的大四狗，最近开始疯狂写demo、看书，准备九、十月份的校招。

晚上用js实现了一个比较简单（low）的拖拽效果，初步测试兼容性还是不错的，于是写一段小博文记录下~大神求轻喷

面向过程的写法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box {

            width: 100px;

            height: 100px;

            background: red;

            position: absolute;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <script>

        window.onload = function (){

            var disX = 0;

            var disY = 0;

            var oBox = document.getElementById("box");

            oBox.onmousedown = function (ev){

                var oEvent = ev || event;

                oBox.style.cursor = "move";

                disX = oEvent.clientX - oBox.offsetLeft;

                disY = oEvent.clientY - oBox.offsetTop;

                document.onmousemove = function (ev){

                    var oEvent = ev || event;

                    var theLeft = oEvent.clientX - disX;

                    var theTop = oEvent.clientY - disY;

                    // 禁止用户从浏览器左框拖出

                    if (theLeft < 0) {

                        theLeft = 0;

                    } else if (theLeft > document.documentElement.clientWidth-

                        oBox.offsetWidth) {

                        theLeft = document.documentElement.clientWidth-

                        oBox.offsetWidth;

                    } else if (theTop < 0) {

                        theTop = 0;

                    } else if (theTop > document.documentElement.clientHeight-

                        oBox.offsetHeight) {

                        theTop = document.documentElement.clientHeight-

                        oBox.offsetHeight;

                    }

                    oBox.style.left = theLeft + 'px';

                    oBox.style.top = theTop + 'px';

                }

            }

            document.onmouseup = function (){

                document.onmousemove =null;

            }

    　　　　 // 窗口重设大小时的处理方法

            window.onresize = function (){

                oBox.style.left = document.documentElement.clientWidth/2-oBox.offsetWidth/2 + 'px';

                oBox.style.top = document.documentElement.clientHeight/2-oBox.offsetHeight/2 + 'px';

            }

            // 兼容firefox 3.6.19

            return false;

        }

    </script>

</body>

</html>

 创建一个拖拽对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box,#box2 {

            width: 100px;

            height: 100px;

            background: red;

            position: absolute;

        }

    </style>

</head>

<body>

    <div id="box"></div>

    <div id="box2"></div>

    <script>

        window.onload = function (){

            new Drag("box");

            new Drag("box2");

        }

        function Drag(id){

            var _this = this;

            this.disX = 0;

            this.disY = 0;

            this.oBox = document.getElementById(id);

            this.oBox.onmousedown = function (ev){

                _this.fnDown(ev);

                // 兼容firefox 3.6.19

                return false;

            };

            document.onmouseup = function (){

                _this.fnUp();

            }

            window.onresize = function (){

                _this.fnResize();

            };

            // 兼容firefox 3.6.19

            return false;

        }

        Drag.prototype.fnDown = function(ev){

            var oEvent = ev || event;

            var _this = this;

            this.oBox.style.cursor = "move";

            this.disX = oEvent.clientX - this.oBox.offsetLeft;

            this.disY = oEvent.clientY - this.oBox.offsetTop;

            document.onmousemove = function (ev){

                _this.fnMove(ev);

            };

        }

        Drag.prototype.fnMove = function(ev){

            var oEvent = ev || event;

            var theLeft = oEvent.clientX - this.disX;

            var theTop = oEvent.clientY - this.disY;

            // 禁止用户从浏览器左框拖出

            if (theLeft < 0) {

                theLeft = 0;

            } else if (theLeft > document.documentElement.clientWidth-

                this.oBox.offsetWidth) {

                theLeft = document.documentElement.clientWidth-

                this.oBox.offsetWidth;

            }

            if (theTop < 0) {

                theTop = 0;

            } else if (theTop > document.documentElement.clientHeight-

                this.oBox.offsetHeight) {

                theTop = document.documentElement.clientHeight-

                this.oBox.offsetHeight;

            }

            this.oBox.style.left = theLeft + 'px';

            this.oBox.style.top = theTop + 'px';

        }

        Drag.prototype.fnUp = function (){

            document.onmousemove =null;

        }

        Drag.prototype.fnResize = function(){

            this.oBox.style.left = document.documentElement.clientWidth/2-this.oBox.offsetWidth/2 + 'px';

            this.oBox.style.top = document.documentElement.clientHeight/2-this.oBox.offsetHeight/2 + 'px';

        }

    </script>

</body>

</html>

[javascript]一种兼容性比较好的简单拖拽的更多相关文章

  1. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  2. 练习：javascript弹出框及地址选择功能,可拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  4. javascript小实例，PC网页里的拖拽

    几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今 ...

  5. javascript小实例，PC网页里的拖拽（转）

    这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推 ...

  6. Unity UGUI 实现简单拖拽功能

    说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...

  7. javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. Javascript:简单拖拽效果的实现

    核心代码: /* *完成一个拖拽事件由三大事件组成: *1:onmousedown:选择元素 *2:onmousemove:移动元素 *3:onmouseup:释放元素 */ function dra ...

  9. 原生js通过prottype写的一个简单拖拽

    <!DOCTYPE html> <head> <meta charset="utf-8"/> <title></title&g ...

随机推荐

  1. 网上下载的“上下3D”和“左右3D”影片该如何播放？

    我们平常买的红蓝3D眼镜智能播放红蓝3D片源.网上找3D电影的时候,虽试图去找红蓝3D格式电影,但总会找到不少“左右格式”或者"上下格式"影片.正常播放后发现有两重画面.这种3D电 ...

  2. 如何将windows版的vim界面语言（默认为中文）设置成英文

    用安装包安装windows版本的vim(下载地址:http://www.vim.org/download.php),vim会自动根据windows的语言设置vim的界面语言.如何将其改为英文呢? 在v ...

  3. Linux软件安装包中devel与非devel包之间的区别

    带devel(develop)的包,俗称开发包.功能上与普通包相同,但体积更大使用rpm -qi看看这两类包的区别: # rpm -qi glibc-devel-2.12-1.149.el6.x86_ ...

  4. 转：详细解说 STL 排序(Sort)

    详细解说 STL 排序(Sort) 详细解说 STL 排序(Sort) 作者Winter 详细解说 STL 排序(Sort) 0 前言: STL,为什么你必须掌握 1 STL提供的Sort 算法 1. ...

  5. HDU 2108 Shape of HDU

    题解:按照输入顺序依次将点连接起来,对于连续的三个点p0,p1,p2,令向量a=p1-p0,b=p2-p1 若是凸多边形,那么b相对于a一定是向逆时针方向旋转的 判断两向量的旋转方向,可以使用向量的叉 ...

  6. poj1201 Intervals【差分约束+SPFA】

    转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4303365.html   ---by 墨染之樱花 题目链接:http://poj.org/pr ...

  7. SQL SERVER 2005 同步复制技术(转)

    SQL SERVER 2005 同步复制技术 以下实现复制步骤(以快照复制为例) 运行平台SQL SERVER 2005 一.准备工作: 1．建立一个 WINDOWS 用户,设置为管理员权限,并设置密 ...

  8. asp.net根据模版生成Word小记

    最近遇到一个问题,客户提了一个新的需求,客户想要将显示在网页上的数据导出成Word进行套打,由于之前没有接触过这一块的内容,自己写的系统也没有使用这种功能,现在重头学习. 具体思路: 1.先制作Wor ...

  9. SharePoint迁移数据到生产环境

    SharePoint迁移数据到生产环境步骤如下: 1. 安装部署好生产环境 2. 配置管理中心 3. 安装SPD工具 4. 备份数据库(放在数据库服务器) 5. 备份wsp包(部署在管理中心服务器) ...

  10. SSIS: 使用最大ID和最大日期来增量更新表

    简单三步: 1.  新增变量 MaxID和MaxCreateDate以及Variable 2.  放置一个 Execute SQL  Task ,用SQL 来获取 MaxID和MaxCreateDat ...