小杨的进阶之路

Appearance

被拖拽元素的事件 ​

  • dragstart: 开始拖拽时触发
    • 常用于设置拖拽数据
    • 可以通过 e.dataTransfer.setData() 设置数据
  • drag: 拖拽过程中持续触发
    • 用于实时更新拖拽状态
    • 可以用来创建拖拽效果
  • dragend: 拖拽结束时触发
    • 清理拖拽状态
    • 重置相关样式

目标元素的事件 ​

  • dragenter: 拖拽元素进入目标元素时触发
    • 可以用来高亮显示可放置区域
    • 通常需要阻止默认行为
  • dragover: 拖拽元素在目标元素上移动时持续触发
    • 必须阻止默认行为才能触发 drop 事件
    • 可以用来调整放置位置提示
  • dragleave: 拖拽元素离开目标元素时触发
    • 移除高亮效果
    • 清除临时状态
  • drop: 在目标元素上释放拖拽元素时触发
    • 通过 e.dataTransfer.getData() 获取数据
    • 处理实际的放置逻辑

使用示例 ​

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      li {
        border: 1px solid #ccc;
        padding: 10px;
        margin: 5px;
        background-color: #eee;
        cursor: grab;
      }

      .dragging {
        opacity: 0.5;
      }
    </style>
  </head>
  <body>
    <div class="content"></div>
    <ul id="sorttbalelist">
      <li draggable="true">1</li>
      <li draggable="true">2</li>
      <li draggable="true">3</li>
      <li draggable="true">4</li>
      <li draggable="true">5</li>
    </ul>
    <script>
      const sorttablelist = document.getElementById('sorttbalelist')

      let dragElement = null
      sorttablelist.addEventListener('dragstart', (e) => {
        e.dataTransfer.setData('text/plain', 'this is text')
        e.dataTransfer.setData('text/html', '<p>this is html</p>')
        e.target.classList.add('dragging')
        dragElement = e.target
      })

      sorttablelist.addEventListener('dragover', (e) => {
        e.preventDefault()
        e.dataTransfer.dropEffect = 'move'
        if (e.target !== dragElement && e.target.tagName === 'LI') {
          const targetMsg = e.target.getBoundingClientRect()
          const targetHeight = targetMsg.height
          // 鼠标相对于浏览器的距离 - 元素距离浏览器的距离
          const mouseY = e.clientY - targetMsg.top
          if (mouseY < targetHeight / 2) {
            sorttablelist.insertBefore(dragElement, e.target)
          } else {
            sorttablelist.insertBefore(dragElement, e.target.nextSibling)
          }
        }
      })
      sorttablelist.addEventListener('dragend', (e) => {
        e.target.classList.remove('dragging')
        dragElement = null
      })

      const content = document.querySelector('.content')
      sorttablelist.addEventListener('drop', (e) => {
        const text = e.dataTransfer.getData('text/plain')
        const html = e.dataTransfer.getData('text/html')
        content.innerHTML = text
      })
    </script>
  </body>
</html>