PC端-元素拖拽

$$元素的最终位置=元素的初始位置+鼠标的距离差$$

html代码：

<div id="box"></div>

css代码：

<style>
        * {
            padding: 0;
            margin: 0;
        }
        
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: hotpink;
        }
    </style>

javascript代码：

<script>
        window.onload = function() {
            var box = document.getElementById('box');

            // 鼠标按下
            box.onmousedown = function(event) {
                event = event || window.event;
                // 初始位置
                var elementStartX = box.offsetLeft
                var elementStartY = box.offsetTop;
                // 鼠标按下的初始位置
                var mouseStartX = event.clientX;
                var mouseStartY = event.clientY;

                // 鼠标移动(此时document，不是box)
                document.onmousemove = function(event) {
                    event = event || window.event;
                    // 鼠标移动后的位置
                    var mouseLastX = event.clientX;
                    var mouseLastY = event.clientY;
                    // 元素移动的距离差
                    var distanceX = mouseLastX - mouseStartX;
                    var distanceY = mouseLastY - mouseStartY;
                    // 元素的最终位置
                    var elementLastX = distanceX + elementStartX;
                    var elementLastY = distanceY + elementStartY;

                    // 设置css
                    box.style.left = elementLastX + 'px';
                    box.style.top = elementLastY + 'px';
                }

                // 鼠标松开(此时是document，不是box)
                document.onmouseup = function(event) {
                    // pc端的onmousemove事件不会自动解绑，需要手动解绑
                    document.onmousemove = document.onmouseup = null;
                }
            }
        }
</script>