拖拽交互常见于各种前端编辑器里，而 “编辑器” 是一个集成前端技术能力的综合性工程，其中就会涉及到各种形式的拖拽交互，因为 “拖拽” 是提升用户体验的重要交互方式，所以需要对拖拽的交互效果做各种定制化，作为开发者理应熟练掌握 “拖拽” 的应用！

最近在开发一款低代码平台，所以借此机会分享一下关于 “拖拽” 这一交互的基础知识和实践经验，希望可以给有需要的同学提供一点参考。

一、HTML5 中的拖放

拖（Drag）和放（Drop）是 HTML5 标准的组成部分，了解掌握之后，举一反三，有助于提升我们在拖拽场景下技术方案的设计能力。

1.1 draggable 属性

现代浏览器中，不难发现，图片标签（<img />）是可以被长按拖拽，但如果需要自定义的 DOM 节点可以被拖拽需要配置以告诉浏览器提供对元素（Element / Tag）支持拖拽的能力。

而元素是否允许被拖放且可响应 API 操作依赖于 draggable 全局标签属性

draggable 是一个布尔值类型的标签属性：

当元素设置了 draggable 属性，此时长按就可以自由拖拽了：

HTML 的 drag & drop 使用了 “DOM Event” 和从 “Mouse Event” 继承而来的 “drag event” 。

一个典型的拖拽操作： 用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标按住不放）至一个可放置的（droppable）元素上，然后松开鼠标。

在拖动元素期间，一些与拖放相关的事件会被触发，像 drag 和 dragover 类型的事件会被频繁触发。

除了定义拖拽事件类型，每个事件类型还赋予了对应的事件处理器

各个事件的时机可以用下面这个图简单表示：