javascript基础从小白到高手系列一百九十五：原生拖放

IE4 最早在网页中为JavaScript 引入了对拖放功能的支持。当时，网页中只有两样东西可以触发拖
放：图片和文本。拖动图片就是简单地在图片上按住鼠标不放然后移动鼠标。而对于文本，必须先选中，
然后再以同样的方式拖动。在IE4 中，唯一有效的放置目标是文本框。IE5 扩展了拖放能力，添加了新
的事件，让网页中几乎一切都可以成为放置目标。IE5.5 又进一步，允许几乎一切都可以拖动（IE6 也支
持这个功能）。HTML5 在IE 的拖放实现基础上标准化了拖放功能。所有主流浏览器都根据HTML5 规范
实现了原生的拖放。
关于拖放最有意思的可能就是可以跨窗格、跨浏览器容器，有时候甚至可以跨应用程序拖动元素。
浏览器对拖放的支持可以让我们实现这些功能。
拖放事件
拖放事件几乎可以让开发者控制拖放操作的方方面面。关键的部分是确定每个事件是在哪里触发
的。有的事件在被拖放元素上触发，有的事件则在放置目标上触发。在某个元素被拖动时，会（按顺序）
触发以下事件：
(1) dragstart
(2) drag
(3) dragend
在按住鼠标键不放并开始移动鼠标的那一刻，被拖动元素上会触发dragstart 事件。此时光标会
变成非放置符号（圆环中间一条斜杠），表示元素不能放到自身上。拖动开始时，可以在ondragstart
事件处理程序中通过JavaScript 执行某些操作。
dragstart 事件触发后，只要目标还被拖动就会持续触发drag 事件。这个事件类似于mousemove，
即随着鼠标移动而不断触发。当拖动停止时（把元素放到有效或无效的放置目标上），会触发dragend
事件。
所有这3 个事件的目标都是被拖动的元素。默认情况下，浏览器在拖动开始后不会改变被拖动元素
的外观，因此是否改变外观由你来决定。不过，大多数浏览器此时会创建元素的一个半透明副本，始终
跟随在光标下方。
在把元素拖动到一个有效的放置目标上时，会依次触发以下事件：
(1) dragenter
(2) dragover
(3) dragleave 或drop
只要一把元素拖动到放置目标上，dragenter 事件（类似于mouseover 事件）就会触发。dragenter
事件触发之后，会立即触发dragover 事件，并且元素在放置目标范围内被拖动期间此事件会持续触发。
当元素被拖动到放置目标之外，dragover 事件停止触发，dragleave 事件触发（类似于mouseout
事件）。如果被拖动元素被放到了目标上，则会触发drop 事件而不是dragleave 事件。这些事件的目
标是放置目标元素。
自定义放置目标
在把某个元素拖动到无效放置目标上时，会看到一个特殊光标（圆环中间一条斜杠）表示不能放下。
即使所有元素都支持放置目标事件，这些元素默认也是不允许放置的。如果把元素拖动到不允许放置的
目标上，无论用户动作是什么都不会触发drop 事件。不过，通过覆盖dragenter 和dragover 事件
的默认行为，可以把任何元素转换为有效的放置目标。例如，如果有一个ID 为"droptarget"的

元素，那么可以使用以下代码把它转换成一个放置目标：
let droptarget = document.getElementById(“droptarget”);
droptarget.addEventListener(“dragover”, (event) => {
event.preventDefault();
});
droptarget.addEventListener(“dragenter”, (event) => {
event.preventDefault();
});
执行上面的代码之后，把元素拖动到这个

上应该可以看到光标变成了允许放置的样子。另外，
drop 事件也会触发。
在Firefox 中，放置事件的默认行为是导航到放在放置目标上的URL。这意味着把图片拖动到放置
目标上会导致页面导航到图片文件，把文本拖动到放置目标上会导致无效URL 错误。为阻止这个行为，
在Firefox 中必须取消drop 事件的默认行为：
droptarget.addEventListener(“drop”, (event) => {
event.preventDefault();
});