<!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. 百度地图api使用，简单搜索+经纬度定位+自定义消息窗口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  2. Java 版本6下载大全

    Oracle 官方 JDK6 下载地址: 基本包含所有的JDK6版本. 需要登注册相应的账户登录到Oracle官网~ http://www.oracle.com/technetwork/java/ja ...

  3. 给iOS开发新手送点福利,简述UILabel的属性和用法

    UILabel属性 1.text:设置标签显示文本. label.text = @"我是Label"; 2.attributedText:设置标签属性文本. NSString *t ...

  4. OD 快捷键

    F3 为加载一个可执行程序,进行调试分析 F2 为下断点 下完断点后,地址变为红色的 程序执行到断点处的时候会停下来 取消断点也是 F2 F4 为把程序执行到光标所在处 如果光标所在的位置在断点处之后 ...

  5. Cesium有价值网址

    //比较粗 https://www.cnblogs.com/mazhenyu/p/6494748.html //很详细 2019.4.19 https://www.cnblogs.com/fuckgi ...

  6. 转：Ubuntu下下载工具安装--uget+aria2

    原文地址:http://burner1024.blog.163.com/blog/static/17447800420126191858424/ Windows下的下载工具--迅雷,之所以下载速度快, ...

  7. PHP redis client封装

    config1.inc.php if (!isset($_REQUEST['pageName']) || $_REQUEST['pageName'] != 'txl-app-test') { $CON ...

  8. BIO模型

    基本模型 代码: 客户端 package bhz.bio; import java.io.BufferedReader; import java.io.IOException; import java ...

  9. innobackupex 备份数据搭建 MySQL Slave

    简介: 数据量比较大时,使用 innobackupex 备份数据新增 MySQL Slave 节点. 安装 innobackupex 工具,我这里写过一次:http://www.cnblogs.com ...

  10. Docker入门命令备份

    1.安装Docker curl -sSL https://get.docker.com/ | sh 2.将当前用户加入Docker用户组,这样就不用每次执行docker 命令时加上sudo了 3.查看 ...