<!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. Appium ios新的定位方式FindsByIosNSPredicate (没有试 先记录在这里) 有个 driver.find_element_by_ios_uiautomation() 研究下 ios的定位

    这个定位方式需要用java-client -5.0.版本,4.x的版本没有这个定位方式 //输入账号和密码 driver.findElementByIosNsPredicate("value ...

  2. 第八章 搭建hadoop2.2.0集群,Zookeeper集群和hbase-0.98.0-hadoop2-bin.tar.gz集群

    安装配置jdk,SSH 一.首先,先搭建三台小集群,虚拟机的话,创建三个 下面为这三台机器分别分配IP地址及相应的角色:集群有个特点,三台机子用户名最好一致,要不你就创建一个组,把这些用户放到组里面去 ...

  3. Ubuntu12.10下Python（cx_Oracle）访问Oracle解决方案

    第一步:下载安装cx_Oracle 下载地址:http://sourceforge.net/projects/cx-oracle/files/5.1.2/,下载cx_Oracle的rmp安装文件,注意 ...

  4. PHP中实现函数重载

    转载自:http://cnn237111.blog.51cto.com/2359144/1284085 由于PHP是弱类型语言,因此函数的输入参数类型无法确定(可以使用类型暗示,但是类型暗示无法用在诸 ...

  5. 【做题记录】USACO gold * 50（第一篇）

    orz xhk 5/50 1597: [Usaco2008 Mar]土地购买 $ f[i]=min(f[j]+x[i]*y[j+1]) $ 然后斜率优化 1699: [Usaco2007 Jan]Ba ...

  6. [CSAPP] The Unicode Standard for text coding

    The ASCII is only suitable for encoding English-language documents. It's hard for us to encode the s ...

  7. java后台面试题整理

    java基础 Arrays.sort实现原理和Collection实现原理foreach和while的区别(编译之后)线程池的种类,区别和使用场景分析线程池的实现原理和线程的调度过程线程池如何调优线程 ...

  8. 第五章 服务容错保护： Spring Cloud Hystrix

    在微服务架构中, 存在着那么多的服务单元, 若一个单元出现故障, 就很容易因依赖关系而引发故障的蔓延,最终导致整个系统的瘫痪,这样的架构相较传统架构更加不稳定.为了解决这样的问题, 产生了断路器等一系 ...

  9. SqlLoad常用技巧总结

    1.控制文件中注释用“--” 2.为防止导入出现中文乱码,在控制文件中加入字符集控制 LOAD DATA CHARACTERSET ZHS16GBK  3.让某一列成为行号,用RECNUM关键字 lo ...

  10. Octave中调用hist出现broken pipe some output may be lost octave的解决（Mac）

    参考:http://octave.1599824.n4.nabble.com/Mac-OS-X-Mountain-Lion-Octave-can-not-execute-sombrero-td4643 ...