javascript基础学习系列三百二十四：原生拖放

IE4 最早在网页中为 JavaScript 引入了对拖放功能的支持。当时，网页中只有两样东西可以触发拖 21 放:图片和文本。拖动图片就是简单地在图片上按住鼠标不放然后移动鼠标。而对于文本，必须先选中， 然后再以同样的方式拖动。在 IE4 中，唯一有效的放置目标是文本框。IE5 扩展了拖放能力，添加了新 的事件，让网页中几乎一切都可以成为放置目标。IE5.5 又进一步，允许几乎一切都可以拖动(IE6 也支 持这个功能)。HTML5 在 IE 的拖放实现基础上标准化了拖放功能。所有主流浏览器都根据 HTML5 规范 实现了原生的拖放。
关于拖放最有意思的可能就是可以跨窗格、跨浏览器容器，有时候甚至可以跨应用程序拖动元素。
浏览器对拖放的支持可以让我们实现这些功能。

dragstart

drag

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();
});