如何实现一个拖拽

如何实现一个拖拽

    // 拖拽功能
  <div class="box" style="width: 100px;height: 100px;background: red;position: absolute;">

    </div>

    let box = document.querySelector('.box');
    let boxX = null;
    let boxY = null;
    let startX = null;
    let startY = null;
    let moveRange = null;  // 控制移动的边界
    // 鼠标按下事件
    function mouseMoveFn(e) {

        // 记录移动的距离

        let moveY = e.pageY - startY;
        let moveX = e.pageX - startX
        //  实时赋值给盒子 让盒子移动起来
        if (moveX > 0) {
            // 说明向右移动
            moveX = Math.min(moveX, moveRange.right);

        } else {
            // 说明向左移动
            moveX = - Math.min(Math.abs(moveX), Math.abs(moveRange.left));
        }
        if (moveY > 0) {
            // 说明向下移动
            moveY = Math.min(moveY, moveRange.bottom);

        } else {
            // 说明向上移动
            moveY = - Math.min(M