HTML5 在 IE 的拖放实现基础上标准化了拖放功能。所有主流浏览器都根据 HTML5 规范 实现了原生的拖放。

关于拖放最有意思的可能就是可以跨窗格、跨浏览器容器，有时候甚至可以跨应用程序拖动元素。

浏览器对拖放的支持可以让我们实现这些功能。

拖放事件

有的事件在被拖放元素上触发，有的事件则在放置目标上触发。

被拖动元素

大多数浏览器此时会创建元素的一个半透明副本，始终 跟随在光标下方

在某个元素被拖动时，会（按顺序） 触发以下事件：
(1) dragstart：在按住鼠标键不放并开始移动鼠标的那一刻，此时光标会 变成非放置符号（圆环中间一条斜杠），表示元素不能放到自身上。
(2) drag：只要目标还被拖动就会持续触发 drag 事件，随着鼠标移动而不断触发。
(3) dragend：当拖动停止时（把元素放到有效或无效的放置目标上）

有效的放置目标

在把元素拖动到一个有效的放置目标上时，会依次触发以下事件：
(1) dragenter：只要一把元素拖动到放置目标上（类似于 mouseover 事件）
(2) dragover：元素在放置目标范围内被拖动期间此事件会持续触发
(3) dragleave 当元素被拖动到放置目标之外
或
(3) drop：被拖动元素被放到了目标上

这些事件的目 标是放置目标元素

自定义放置目标

在把某个元素拖动到无效放置目标上时，会看到一个特殊光标（圆环中间一条斜杠）表示不能放下。

即使所有元素都支持放置目标事件，这些元素默认也是不允许放置的。

如果把元素拖动到不允许放置的 目标上，无论用户动作是什么都不会触发 drop 事件。

不过，通过覆盖 dragenter 和 dragover 事件 的默认行为，可以把任何元素转换为有效的放置目标。

// <div>元素，那么可以使用以下代码把它转换成一个放置目标
let droptarget = document.getElementById("droptarget"); 
droptarget.addEventListener("dragover", (event) => { 
 event.preventDefault(); 
}); 
droptarget.addEventListener("dragenter", (event) => { 
 event.preventDefault(); 
});

执行上面的代码之后，把元素拖动到这个

<!-- 禁止拖动图片 --> 
<img src="smile.gif" draggable="false" alt="Smiley face"> 
<!-- 让元素可以拖动 --> 
<div draggable="true">...</div>