<!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. Java程序员之JS(一) 入门

    背景:使用了JS做一个 WEB 项目之后,一直有使用JS 的一个功能,突然某一天项目重新规划,开始自己手动写一些原始JS,情况不妙,原来之前一直是用同事搭建好的框架在开发,对 JS 零基础的我一直在 ...

  2. JDK 9 & JDK 10 新特性

    JDK 9 新增了不少特性,官方文档:https://docs.oracle.com/javase/9/whatsnew/toc.htm#JSNEW-GUID-527735CF-44E1-4144-9 ...

  3. ColorPic 一套簡單好用的顏色選擇器!

    做美工的時候,常常會有配色.抓取顏色及獲取顏色代碼的困擾,專業人士可能有很好的工具來協助,但對於偶爾需要或非經常接觸美工的人來說,即便是有很好的工具,也還要花很多時間進行學習,常常就是看到一個漂亮的顏 ...

  4. jquery发送数组

    假设keywordid_list是一个javascript数组,将它发送到keywordbatchsetting.php. $.ajax({ url:"keywordbatchsetting ...

  5. 5月12日上课笔记-js 弹出框、函数、程序调试、基本事件、浏览器对象模型

    一.弹出框 a.提示框 alert(); b.输入框 prompt(); c.确认框 confirm(); var flag= confirm("确认删除吗?"); 二.js程序调 ...

  6. Java toString()方法

    JDK API java.lang 的Object类中的toString()方法 toString public String toString() 返回该对象的字符串表示.通常,toString 方 ...

  7. mysqldumpl备份

    mysqldump --databases mydatabase --lock-all-tables --flush-logs mysqldump -h10. -uroot -p密码 --databa ...

  8. 使用被动混合内容的方式来跨越浏览器会阻断HTTPS上的非安全请求（HTTP）请求的安全策略抓包详解

    /*通过传入loginId在token中附加loginId参数,方便后续读取指定缓存中的指定用户信息*/ GET /multitalk/takePhone.php?loginId=4edc153568 ...

  9. 异步编程之co——源码分析

    异步编程系列教程: (翻译)异步编程之Promise(1)--初见魅力 异步编程之Promise(2):探究原理 异步编程之Promise(3):拓展进阶 异步编程之Generator(1)--领略魅 ...

  10. vue之vue-router跳转

    vue之vue-router跳转 一.配置 在初始化使用vue-cli的时候会有vue-router的安装选择,选择安装即可. 二.嵌套路由 一般情况下,登录和项目页面属于同级,所以App.vue 只 ...