拖放流程及对应事件

设置元素为可拖放 ---> 拖动元素 ---> 放置元素

设置元素为可拖放

draggable属性：设置元素是否可拖动。语法：<div draggable="true | false | auto" >

以下是 draggable 属性的可选值以及它们的描述：

可选值	描述
true	表示元素可以被拖动。
false	表示元素不能被拖动。
auto	表示浏览器自动决定元素是否可以被拖动。这通常取决于元素的内容和浏览器本身的行为。
inherit	表示元素继承其父元素的 draggable 属性值。如果没有父元素，则默认为 auto。

注意，如果未设置 draggable 属性或者其值不是 true、false、auto 或 inherit，则默认为 auto。在大多数情况下，将 draggable 属性设置为 true 可以使元素能够被拖动。

下表格，列出了dragstart、drag和dragend事件的特性：

注意：dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

事件名称	默认行为
`dragstart`	开始拖拽操作，并将被拖拽元素的数据传递给目标元素
`drag`	无
`dragend`	清理拖拽操作，移除拖拽元素的数据类型和数据
`dragenter`	其默认行为是阻止拖放操作的默认行为，以便在拖动元素进入可放置目标时执行自定义操作。通常，通过在dragenter事件处理程序中调用event.preventDefault()方法来阻止默认行为，以便在进入可放置区域时自定义显示效果，例如更改背景颜色或显示放置区域的轮廓。
`dragover`	不允许拖拽元素放置在目标元素的可拖放区域内，需要通过调用`event.preventDefault()`来阻止默认行为
`dragleave`	清理目标元素标记