前端实现原生拖拽交互

拖拽事件

HTML 的 drag & drop 使用了 DOM event model 以及从 mouse events 继承而来的 drag events。一个典型的拖拽操作是这样的：用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的元素，然后释放鼠标。

在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如drag 和 dragover 事件类型）。

所有的 拖拽事件类型 有一个对应的 拖拽全局属性。每个拖拽事件类型和拖拽全局属性都有对应的描述文档。下面的表格提供了一个简短的事件类型描述，以及一个相关文档的链接。

事件	On 型事件处理程序	触发时刻
dragstart	ondragstart	当用户开始拖动一个元素时触发。在这个事件中，可以设置dataTransfer对象的数据，并指定拖动操作的效果。
drag	ondrag	在拖动操作进行期间，当元素被拖动时持续触发
dragenter	ondragenter	当被拖动的元素进入放置目标时触发。
dragover	ondragover	当被拖动的元素在放置目标上移动时持续触发。为了允许放置，必须在dragover事件处理器中调用event.preventDefault()（每 100 毫秒触发一次）。
dragleave	ondragleave	当被拖动的元素离开放置目标时触发。
drop	ondrop	当被拖动的元素在放置目标上释放时触发。在这个事件中，可以获取dataTransfer对象中的数据，并执行放置操作。
dragend	ondragend	当拖动操作结束时触发，无论放置是否成功。

**注意：当从操作系统向浏览器中拖拽文件时，不会触发 dragstart 和dragend 事件。

以下是事件触发的顺序示例：

dragstart -> (drag) -> dragenter -> (dragover) -> [dragleave] -> drop -> dragend

括号()表示事件可能会连续触发多次，方括号[]表示事件是可选的，只在元素离开放置目标而不是放置在该目标上时触发。

请注意，dragleave事件并不总是发生在drop事件之前。如果用户在拖动元素时没有离开放置目标，那么就不会触发dragleave事件。同样，如果拖动操作没有结束在有效的放置目标上，那么drop事件也不会触发。

了解这个顺序对于正确实现拖放功能非常重要，因为它决定了在何时设置数据、何时检查放置条件以及何时执行放置操作。

定义拖拽效果

dropEffect 属性用来控制拖放操作中用户给予的反馈。它会影响到拖拽过程中浏览器显示的鼠标样式。比如，当用户悬停在目标元素上的时候，浏览器鼠标也许要反映拖放操作的类型。

有 3 个效果可以定义：

1. copy 表明被拖拽的数据将从它原本的位置拷贝到目标的位置。
2. move 表明被拖拽的数据将被移动。
3. link 表明在拖拽源位置和目标位置之间将会创建一些关系表格或是连接。

在拖拽过程中，拖拽效果也许会被修改以用于表明在具体位置上具体效果是否被允许，如果允许，在该位置则被允许放置。

定义一个放置区

当拖拽一个项目到 HTML 元素中时，浏览器默认不会有任何响应。想要让一个元素变成可释放区域，该元素必须设置 ondragover 和 ondrop 事件处理程序属性，并且使用e.preventDefault(); 阻止默认行为，允许放置 。

代码示例：

1.父组件新增拖动容器drag-container

2.子组件div设置draggable=”true”

效果图