<!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. centos如何使用utc时间

    1.将本地时间文件改名,做备份文件为localtime2 mv /etc/localtime /etc/localtime2 2.将UTC文件和本地文件做连接ln -s /usr/share/zone ...

  2. 使用wifi网卡笔记4---工具dhcp及全自动使用wifi

    dhcp : 使得WIFI网卡动态获取IP ·1.源码获取 输入dh看有哪些应用程序,输入dhclient -v查看一下相关信息,源码获取的网址 2.开发环境配置 解压 tar xzf dhcp-4. ...

  3. 初识python（python的安装与运行）

    python--“优雅”.“明确”.“简单”的哲学定位 一.python的安装(Windows环境下) 1.在python官网下载安装文件 python的官方网址:https://www.python ...

  4. Tkinter Colors（颜色）

          Tkinter Colors: Tkinter的代表与字符串的颜色.一般有两种方式来指定Tkinter的颜色 Tkinter的代表与字符串的颜色.一般有两种方式来指定Tkinter的颜色: ...

  5. SQLite的基本用法

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

  6. 语义分析：C语言表达式的语法树生成——Python实现

      令狐冲慢慢走近,那汉子全身发抖,双膝一屈,跪倒在雪地之中.令狐冲怒道:“你辱我师妹,须饶你不得.”长剑指在他咽喉之上,心念一动,走近一步,低声问道:“写在雪人上的,是些什么字?”   那汉子颤声道 ...

  7. delphi IOS 通知 TNotification

    delphi  IOS 通知 TNotification http://blogs.embarcadero.com/ao/2013/05/01/39450 TNotification http://d ...

  8. Itext读取PDF模板文件渲染数据后创建新文件

    Maven导入依赖 <properties> <itextpdf.version>5.5.0</itextpdf.version> <itext-asian. ...

  9. arcserver 跨域问题

    http://resources.arcgis.com/en/help/rest/apiref/config.html#jcrossOriginAccesshttp://enable-cors.org ...

  10. IOSerialize（序列化）

    在讲序列化和反序列化之前,先来阐述文件夹/文件 检查.新增.复制.移动.删除, Directory和DirectotyInfo这两个特性主要是对文件夹进行操作 首先检测文件夹是否存在 if (!Dir ...