实现一个盒子拖拽

假设有一个盒子的id为divdrag

javascript部分的逻辑为

//1.获取盒子对象
const divdrag = document.getElementById("divdrag")
//2.定义一个变量来记录盒子是否在拖拽的状态
const isDrag = false
let offsetX,offsetY

//绑定mousedown事件
divdrag.addEventListener("mousedown",function(e){
    //(4.1)更新拖拽状态
    isDrag = true
    //(4.2)记录鼠标相对于盒子边缘的距离
    offsetX = e.clientX - divdrag.getBoundingClientRect().left
    offsetY = e.clientY - divdrag.getBoundingClientRect().right
})

document.addEventListener("mousemove",function(e){
    if(!isDrag)return
    //计算divdrag新的距离
    divdrag.style.left = e.clientX - offsetX +"px"
    divdrag.style.right = e.clientY - offsetY +"px"
})

document.addEventListener("mouseup",function(e){
    //取消拖拽
    isDrag = false
})