JavaScript 实现拖拽

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>Documenttitle>
    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>