原生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);