JavaScript 实现拖拽

时间:2021-02-23 14:25:55   收藏:0   阅读:0
<!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>

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!