DOM元素

在页面中放置一个供移动的 DOM。

<head>
  <style>
    .container {
      position: relative;
    }

    .moveItem {
      position: absolute;
      top: 0;
      left: 0;
      height: 100px;
      width: 100px;
      border-radius: 50%;
      background: brown;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="moveItem" class="moveItem"></div>
  </div>
</body>

拖拉拽JS

用 JS 给 DOM 添加拖拉拽功能。

<script>
  const moveDom = window.document.getElementById('moveItem') // 获取拖拽 DOM
  let dx = 0, dy = 0 // 鼠标位置与被拖拽 DOM 的相对位置
  let moveFlag = false // 是否进入拖拉拽状态标识
  moveDom.addEventListener('mousedown', (e) => { // 为 DOM 添加鼠标键按下事件，确定 DOM 要被拖动
    moveFlag = true
    dx = e.layerX // 记录相对位置 x 
    dy = e.layerY // 记录相对位置 y
  })
  moveDom.addEventListener('mouseup', () => { // 为 DOM 添加鼠标键放开事件，DOM 拖动结束
    moveFlag = false
  })
  window.addEventListener('mousemove', (e) => { // 为整个页面添加鼠标移动事件，不添加在 DOM 上主要是拖拽有延迟，避免鼠标移动太快离开了元素范围
    if (!moveFlag) return // 如果不在拖动状态，禁止移动，直接跳出
    moveDom.style.cssText += `left: ${e.x - dx}px; top: ${e.y - dy}px;` // 直接给 DOM 添加位置信息，其中要把相对位置 (dx, dy) 的位置减去
  })
</script>

关键点

获取 DOM 元素；
为 DOM 元素绑定鼠标按下 mousedown、鼠标释放 mouseup 事件：
- 鼠标按下事件 mousedown，进入 DOM 移动状态，并记录鼠标在 DOM 中的位置 (dx, dy)；
- 鼠标释放事件 mouseup，结束 DOM 移动状态。
为页面添加鼠标移动 mousemove 事件：
- 如果不在 DOM 移动状态，直接跳出；
- 如果在 DOM 移动状态，根据鼠标的位置移动 DOM；
- 减去鼠标在 DOM 中的相对位置 (dx, dy)，确保相对位置不变。

注意鼠标移动事件 mousemove 是添加给 window 的，可以测试，比直接加在 DOM 元素上好使。

笔记主要为自用，欢迎友好交流！

【JS笔记】DOM元素拖拉拽

DOM元素

拖拉拽JS

关键点