如何用原生JS实现拖拽功能

预备知识

鼠标事件mousedown,mousemove,mouseup；

实现思路

1.当鼠标移入元素并且点击时，触发mousedown事件，让元素变为可移动状态；
2.当鼠标在移动时，触发mousemove先判断元素是否处于可移动状态，根据其状态决定该元素要不要移动；
3.当鼠标松开时，触发mouseup事件，使元素变为不可移动状态；

代码实现

先来一个小球：

  <div id="ball"></div>

样式：

#ball {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: black;
      cursor: pointer;
      position: absolute;
    }

mousedown事件

ball.addEventListener('mousedown', () => {
      isMove = true
    })

mousemove事件

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`
    })

mouseup事件

ball.addEventListener('mouseup', ()=> {
      isMove = false
    })

效果