专栏首页前端儿简单的鼠标可拖动DIV 兼容IE/FF

简单的鼠标可拖动DIV 兼容IE/FF

一个简单的可拖动div,随着鼠标的移动,div可随之走动

主要思路:

一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等)

并继而转为监测onmousemove事件,在鼠标移动事件中更新div对象的位置属性

鼠标松开的时候解除监听,更新位置完成。

需要注意的两点

1.更新对象的位置需要用到o.style.left等,这些CSS属性只能内嵌才能被访问到:

<div id="box" style="left:200px;top:200px;"> box </div>

放在<style></style>中是无法访问的,比如:

#box{position: absolute;left:200px;top:200px;width: 200px;}

假如这样做,显示的是无法获取值,请看举例:

//    alert(e.clientX+"  -- " + o.style.left+" -- "+ X);

这样的结果为 :(详情看后边代码)

2. FireFox中是不能直接取event对象的,一般我们都会简单地使用 e = e || event 来区分,其中e是相应于FF中函数的参数部分

比如:

 document.getElementById("box").onmousedown = function(e){ 
        getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE
    };

当然有些时候也可以这样考虑:使用全局对象arguments[0]来替代捕获到的事件参数

//    dis = arguments[0]||window.event;   //如果上面那句在FF下无法获取事件,听说可以通过 arguments[0]获取FF下的事件对象

对于拖拽事件这里使用到了另外一种常用的方法:

// document.all(IE)使用setCapture方法绑定;其余比如FF使用Window对象针对事件的捕捉
        document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);  


// document.all(IE)使用releaseCapture解除绑定;其余比如FF使用window对象针对事件的捕捉
        document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)

最后是一个可随鼠标拖动的div

代码,有注释,希望能理解:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    #box{position: absolute;left:200px;top:200px;width: 200px;border:1px solid #333;height: 200px;background-color: #009cc9;text-align: center;}
</style>
</head>
<body>
    <div class="wrap">
        <div id="box" style="left:200px;top:200px;"> box </div>
    </div>
    <script type="text/javascript">
    var o,   //捕获到的事件
          X,  //box水平宽度
          Y;  //box垂直高度
    function getObject(obj,e){    //获取捕获到的对象
        o = obj;
        // document.all(IE)使用setCapture方法绑定;其余比如FF使用Window对象针对事件的捕捉
        document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);  
        X = e.clientX - parseInt(o.style.left);   //获取宽度,
        Y = e.clientY - parseInt(o.style.top);   //获取高度,
    //    alert(e.clientX+"  -- " + o.style.left+" -- "+ X);
    }
    document.getElementById("box").onmousedown = function(e){ 
        getObject(this,e||event);       //box捕获事件并处理  e-->FF  window.event-->IE
    };
    document.onmousemove = function(dis){    //鼠标移动事件处理
        if(!o){    //如果未获取到相应对象则返回
            return;
        }
        if(!dis){  //事件
            dis = event ;
        //    dis = arguments[0]||window.event;   //如果上面那句在FF下无法获取事件,听说可以通过 arguments[0]获取FF下的事件对象
        }
        o.style.left = dis.clientX - X +"px";     //设定box样式随鼠标移动而改变
        o.style.top = dis.clientY - Y + "px";
    };
    document.onmouseup = function(){    //鼠标松开事件处理
        if(!o){   //如果未获取到相应对象则返回
            return;
        }
        // document.all(IE)使用releaseCapture解除绑定;其余比如FF使用window对象针对事件的捕捉
        document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
        o = '';   //还空对象
    };
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 天干地支五行八卦的对应关系

    一石匠人
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人

扫码关注云+社区

领取腾讯云代金券