手写合集

手写事件拖拽

<script>
  let dragging = false
  let positon = null

  // 假设一个div的id叫xxx
  xxx.addEventLisener('mousedown' , function(e) {
    dragging = true // 开始拖拽
    position = [e.clientX, e.clientY] // 鼠标点击的初始位置
  })

  document.addEventLisener("mousemove" , function(e) {
    if(dragging === false){return}
    const x = e.cilentX
    const y = e.clientY
    const deltaX = x - position[0]
    const daltaY = y - position[1]
    const left = parseInt(xxx.style.left || 0)
    const top = parseInt(xxx.style.top || 0)
    xxx.style.left = left + deltaX + "px"
    xxx.style.yop = top + deltaY + "px"
    position = [x , y]
  }) 
    document.addEventLisener('mouseup' , function(e) {
      dragging = false
    })
</script>