js 拖拽元素

js 拖拽元素 在指定区域移动 (方法:通过计算前后鼠标点的移动距离 x轴，y轴方向；修改元素定位位置)

浏览器中 x轴 自左 至右（负值到正值） y轴 自上 至下（负值到正值）

鼠标按下 获得元素初始坐标点(x,y) 鼠标移动 获得元素新的坐标点(x1,y1) 新坐标点减去 初始坐标点 获得鼠标 ‘点’ 在 x 轴 和 y轴上的移动距离； 元素.offsetLeft 距离上一级元素 左侧的位置，文章中 指的 id 为box 的div元素； 元素.offsetTop 距离上一级元素 顶部的位置； 需要移动的目标元素的新位置(定位的位置) 是 left = 元素.offsetLeft + (x1 - x) , top = 元素.offsetTop + (y1 - y)

Document *{ margin: 0; padding: 0; } #box{ height: 400px; width: 600px; border: 1px solid black; margin: 0 auto; position: relative; } .move{ height: 80px; width: 80px; background-color: black; position: absolute; top: 10px; left: 10px; transition: all linear; } </style>

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

</div>
<script>
    let move = document.getElementById('move')
    let box = document.getElementById('box')

    let startX  = ''
    let startY  = ''
    let initialX= ''
    let initialY= ''
    let x = ''
    let y = ''

    move.onmousedown = function(e){
       startX   = move.offsetLeft
       startY   = move.offsetTop
        //初始鼠标点击的坐标
       initialX = e.pageX
       initialY = e.pageY
       box.addEventListener('mousemove',moves)
    }

    const moves = function(e){
        // 新的坐标点 减去 初始 坐标点
        let finallyX =  e.pageX -initialX
        let finallyY = e.pageY - initialY
         x = startX + finallyX
        y = startY + finallyY
    
        //限定元素不超出边界进行移动
        if(x>=520){
            x = 520
        }else if( x <= 0){
            x = 0
        }

        if(y>=320 ){
            y = 321
        }else if(y <= 0){
            y = 0
        }
        move.style.left = x +'px'
        move.style.top =y +'px'
    }

    move.onmouseup = function(){
         box.removeEventListener('mousemove',moves)
    } 

</script>