JavaScript 实现拖拽

时间：2021-02-23 14:25:55 阅读：0 评论：0 收藏：0 [点我收藏+]

标签：order setw tle utf-8 javascrip title viewport || style

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 100px;
            height: 100px;
            background: #0000FF;
            border: 1px solid black;
            position: absolute;
        }
    </style>

    <script>
        window.onload = function () {
            var oDiv = document.getElementById(‘div1‘);
            drag(oDiv,1);
        }

        /**
         * @todo 拖拽元素在页面上移动
         * @param node 要拖拽的元素
         * @param flag 是否限制出界 0-不限制 1-限制
         */
        function drag(node, flag) {
            /*
                mousedown
                    // 获取鼠标相对于拖拽元素的位置
                    var offsetX = e.clientX - node.offsetleft;
                    var offsetY = e.clientY - node.offsettop;
                mousemove
                    // 先获取鼠标相对于窗口的位置，然后减去相对于元素的位置，赋值给元素的左上
                    var nodeOffsetX = e.clientX - offsetX;
                    var nodeOffsetY = e.clientY - offsetY;

                    node.style.left = nodeOffsetX + ‘px‘;
                    node.style.top = nodeOffsetY + ‘px;
                mouseup
                    取消拖拽
             */

            window.onmousedown = function (eve) {
                var e = eve || window.event;
                var offsetX = e.clientX - node.offsetLeft;
                var offsetY = e.clientY - node.offsetTop;

                document.onmousemove = function (ev) {
                    var e1 = ev || window.event;
                    var nodeOffsetX = e1.clientX - offsetX;
                    var nodeOffsetY = e1.clientY - offsetY;
                    if (flag) {
                        // 获取窗口的宽
                        var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
                        // 获取窗口的高
                        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

                        if (nodeOffsetX < 0) {
                            nodeOffsetX = 0;
                        }
                        if (nodeOffsetX >= windowWidth - node.offsetWidth) {
                            nodeOffsetX = windowWidth - node.offsetWidth;
                        }

                        if (nodeOffsetY < 0) {
                            nodeOffsetY = 0;
                        }

                        if (nodeOffsetY >= windowHeight - node.offsetHeight) {
                            nodeOffsetY = windowHeight - node.offsetHeight;
                        }
                    }
                    node.style.left = nodeOffsetX + ‘px‘;
                    node.style.top = nodeOffsetY + ‘px‘;
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

JavaScript 实现拖拽

标签：order setw tle utf-8 javascrip title viewport || style

原文地址：https://www.cnblogs.com/lxhyty/p/14433704.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行