HTML Drag

拖放功能在 Web 中是很常见的，比如拖拽排序，拖拽上传文件等等。本文将详细的介绍 DnD(Drag and Drop) API，让你对拖放功能有一定的认识。

概述

一个典型的拖放操作是这样的：用户选中一个可拖拽的(draggable) 元素，并将其拖拽（鼠标不放开）到一个可放置的(droppable) 元素，然后释放鼠标。

在这个过程中，最重要的三个点是：

  • 让元素可拖拽
  • 让另一个元素支持可放置
  • 可拖拽和可放置元素之间的数据传递
See the Pen <a href="https://codepen.io/ileostar/pen/QWoWvqg"> Drag</a> by LeoStar (<a href="https://codepen.io/ileostar">@ileostar</a>) on <a href="https://codepen.io">CodePen</a>.

应用场景

  1. 图片拖放
    • 创建一个图片库，允许用户从库中拖动图片到指定区域或其他应用程序。
    • 使用draggable属性和事件处理程序实现拖放操作。
    • 提供友好的用户界面，让用户轻松地管理和使用图片资源。
  2. 文件上传
    • 利用拖放功能简化文件上传体验。
    • 用户可以将文件拖动到指定的上传区域，通过事件处理程序将文件上传到服务器。
    • 使用dragover和drop事件监听拖放操作，并获取拖放的文件进行处理。
  3. 元素排序和重排
    • 利用拖放功能实现元素的排序和重排。
    • 创建一个可拖动的列表，用户可以通过拖动列表项来重新排序它们的顺序。
    • 通过监听dragstart、dragenter、dragover、dragleave和drop等事件，实现元素的拖放排序。
  4. 创建可定制的拖放区域
    • 利用拖放功能创建可定制的拖放区域。
    • 用户可以将不同类型的元素拖动到特定区域以执行不同的操作。
    • 通过监听dragenter、dragover和drop事件，实现自定义的拖放区域。
  5. 实现游戏交互
    • 利用拖放功能实现基于拖动的游戏交互。
    • 创建拼图游戏等，用户可以通过拖动碎片来重新组合图片。
    • 通过监听dragstart、dragenter、dragover、dragleave和drop等事件，实现游戏中的拖放操作。

DnD API

拖拽事件

拖放过程的各个事件和触发时刻如下：

事件事件主体触发时刻
dragstart被拖放元素在开始拖放被拖放元素时触发
drag被拖放元素在正在拖放被拖放元素时触发
dragleave目标元素在被拖放元素移出目标元素是触发
dragenter目标元素在被拖放元素进入某元素时触发
dragover目标元素在被拖放在某元素内移动时触发（每100毫秒触发一次）
drop目标元素在目标元素完全接受被拖放元素时触发
dragend被拖放元素在整个拖放操作结束时触发 (比如松开鼠标按键或敲“Esc”键)

See the Pen <a href="https://codepen.io/ileostar/pen/MWxYpOa"> DnD Example</a> by LeoStar (<a href="https://codepen.io/ileostar">@ileostar</a>) on <a href="https://codepen.io">CodePen</a>.