拖拽demo--兼容--全局捕获

Posted zhanghua-zh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖拽demo--兼容--全局捕获相关的知识，希望对你有一定的参考价值。

<!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--兼容--全局捕获的主要内容，如果未能解决你的问题，请参考以下文章

自定义拖拽

原生弹窗拖拽代码demo+简单的抽奖

Javalucene4.0学习心得

VS code自定义用户代码片段snippet

springboot 全局异常捕获

Spring boot异常统一处理方法：@ControllerAdvice注解的使用全局异常捕获自定义异常捕获