<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        html,

        body {

            height: 100%;

            overflow: hidden;

        }

        #box {

            position: absolute;

            width: 150px;

            height: 150px;

            background-color: orangered;

        }

    </style>

</head>

<body>

    略略略

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

    <script>

        window.onload = function () {

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

            box.onmousedown = function (e) {

                e = e || window.event;

                var mouseDownPoint = { "x": 0, "y": 0 };

                var boxStartPoint = { "x": 0, "y": 0 };

                boxStartPoint.x = this.offsetLeft;

                boxStartPoint.y = this.offsetTop;

                mouseDownPoint.x = e.clientX;

                mouseDownPoint.y = e.clientY;

                // 使用全局捕获，阻止ie8以下浏览器事件的默认行为

                if (this.setCapture) {

                    this.setCapture();

                }

                document.onmousemove = function (e) {

                    e = e || window.event;

                    var mouseMovePoint = { "x": 0, "y": 0 };

                    mouseMovePoint.x = e.clientX;

                    mouseMovePoint.y = e.clientY;

                    box.style.left = mouseMovePoint.x - mouseDownPoint.x + boxStartPoint.x + "px";

                    box.style.top = mouseMovePoint.y - mouseDownPoint.y + boxStartPoint.y + "px";

                    return false; // 无法禁止ie8以下浏览器事件的默认行为

                }

                document.onmouseup = function () {

                    document.onmousemove = document.onmouseup = null;

                    if (document.releaseCapture) { // 取消全局捕获

                        document.releaseCapture();

                    }

                }

            }

        }

    </script>

</body>

</html>

兼容ie8，使用全局捕获，阻止ie8以下浏览器事件的默认行为

拖拽demo--兼容--全局捕获的更多相关文章

  1. 写一个兼容性比较好的拖拽DEMO

    写一个兼容性比较好的拖拽DEMO 查看Demo 思路 div盒子 鼠标按下事件onmousedown 鼠标移动事件onmousemove,获得鼠标的坐标,将div移动至鼠标的当前坐标 鼠标抬起事件om ...

  2. 理解事件捕获。在限制范围内拖拽div+吸附+事件捕获

    一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...

  3. angular ng-repeat+sortable 拖拽demo

    由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...

  4. html5 - drag 拖拽

    参考资料: 张鑫旭             : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...

  5. jquery插件之拖拽

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...

  6. 移动端拖拽（模块化开发，触摸事件，webpack）

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  7. 自己写一个jqery的拖拽插件

    说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...

  8. 原生Js实现拖拽（适用于pc和移动端）

    效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. 解决拖拽有内容的div的bug和兼容问题

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

随机推荐

  1. my.conf配置大全

    [client]port = 3306socket = /tmp/mysql.sock [mysqld]port = 3306socket = /tmp/mysql.sock basedir = /u ...

  2. ZOJ 3609 Modular Inverse(拓展欧几里得求最小逆元）

    Modular Inverse Time Limit: 2 Seconds      Memory Limit: 65536 KB The modular modular multiplicative ...

  3. Java-Runoob：Java Number & Math 类

    ylbtech-Java-Runoob:Java Number & Math 类 1.返回顶部 1. Java Number & Math 类 一般地,当需要使用数字的时候,我们通常使 ...

  4. python学习（二十二） String(上)

    str1 = "This is a 'test'" print(str1) str1 = 'This is a "test"' print(str1) str1 ...

  5. View.findViewById()和Activity.findViewById()区别

    在网上看见View.findViewById() 和 Activity.findViewById()执行效率不一样 使用Activity.findViewById()如: TextView tv_in ...

  6. OD 实验(一) - 修改程序标题

    需要修改的程序 把 I love fishc.com 修改为 hello world sch01ar 用 OD 打开程序 在程序入口处开始一直按 F8 运行程序,看看在哪里弹出对话框 运行到该地址的时 ...

  7. <转>Python3.x和Python2.x的区别

    这个星期开始学习Python了,因为看的书都是基于Python2.x,而且我安装的是Python3.1,所以书上写的地方好多都不适用于Python3.1,特意在Google上search了一下3.x和 ...

  8. Cisco动态路由 OSPF协议

    OSPF描述: 组播扩展OSPF  锁定 同义词 ospf一般指组播扩展OSPF 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . OSPF(Open Shortest Path Firs ...

  9. SQLite的基本用法

    SQLite是Android自带的轻量级数据库,接口封装的很好,不会SQL的也能很好的使用. 接下来讲一下怎么创建数据库.通过adb查看数据表和数据.增删查改. 一.创建数据库 Android封装了S ...

  10. html——网页高度

    确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条) var w=window.innerWidth || document.documentElement.clientWidth || doc ...