实现拖拽

一.Version1.0的具体实现原理

• mousedown

  • mousedown事件发生时，将开始移动属性设置为true

• mousemove

  • mousemove事件发生时，先判断isMove属性是否为true，根据isMove是否为true决定是否执行更新位置的操作

  • let x = e.pageX - ball.offsetWidth / 2
    let y = e.pageY - ball.offsetHeight / 2
    ball.style.left = `${x}px`
    ball.style.top = `${x}px`
    

• mouseup

  • 发生mouseup事件后，将isMove设置为false，使mousemove改变位置的操作不执行

注意事项：

• 小球的position应设置为absolute

该版本的缺陷：

• 移动的时候会脱离鼠标不动
• 原因：mousemove事件绑定到了元素本身，这意味着当鼠标移出元素所 占据的范围的时候，元素会停止移动。

二.Version2.0修复bug

  document.addEventListener('mousemove', (e) => {
    if (!isMove) return
    let x = e.pageX - ball.offsetWidth / 2
    let y = e.pageY - ball.offsetHeight / 2
    ball.style.left = `${x}px`
    ball.style.top = `${y}px`
  })

三.完整代码

   const ball = document.getElementById('ball')
   let isMove = false
   ball.addEventListener('mousedown', () => {
     isMove = true
   })
   // 绑定为元素本身，超出范围时，元素就停止移动
   // ball.addEventListener('mousemove', (e) => {
   document.addEventListener('mousemove', (e) => {
     if (!isMove) return
     let x = e.pageX - ball.offsetWidth / 2
     let y = e.pageY - ball.offsetHeight / 2
     ball.style.left = `${x}px`
     ball.style.top = `${y}px`
   })
   ball.addEventListener('mouseup', ()=> {
     isMove = false
   })