原生js实现拖拽功能

1. 给个div，给定一些样式

  <div class="drag" style="left:0;top:0;width:100px;height:100px">按住拖动</div>

<style>
        .drag {
            background-color: skyblue;
            position: absolute;
            line-height: 100px;
            text-align: center;
        }
 </style>

2.js部分

  // 获取DOM元素
        let dragDiv = document.getElementsByClassName("drag")[0];
        // 鼠标按下事件 处理程序
        let putDown = function (event) {
            dragDiv.style.cursor = "pointer";
            let offsetX = parseInt(dragDiv.style.left); // 获取当前的x轴距离
            let offsetY = parseInt(dragDiv.style.top); // 获取当前的y轴距离
            let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
            let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距
            // 按住鼠标时为div添加一个border
            dragDiv.style.borderStyle = "solid";
            dragDiv.style.borderColor = "red";
            dragDiv.style.borderWidth = "3px";
            // 鼠标移动的时候不停的修改div的left和top值
            document.onmousemove = function (event) {
                dragDiv.style.left = event.clientX - innerX + "px";
                dragDiv.style.top = event.clientY - innerY + "px";
                // 边界判断
                if (parseInt(dragDiv.style.left) <= 0) {
                    dragDiv.style.left = "0px";
                }
                if (parseInt(dragDiv.style.top) <= 0) {
                    dragDiv.style.top = "0px";
                }
                if (parseInt(dragDiv.style.left) >= window.innerWidth - parseInt(dragDiv.style.width)) {
                    dragDiv.style.left = window.innerWidth - parseInt(dragDiv.style.width) + "px";
                }
                if (parseInt(dragDiv.style.top) >= window.innerHeight - parseInt(dragDiv.style.height)) {
                    dragDiv.style.top = window.innerHeight - parseInt(dragDiv.style.height) + "px";
                }
            }
            // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件
            // 否则鼠标抬起后还可以继续拖拽方块
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                // 清除border
                dragDiv.style.borderStyle = "";
                dragDiv.style.borderColor = "";
                dragDiv.style.borderWidth = "";
            }
        }
        // 绑定鼠标按下事件
        dragDiv.addEventListener("mousedown", putDown, false);