20.6.2自定义放置目标

在把某个元素拖动到无效放置目标上时，会看到一个特殊光标（圆环中间一条斜杠）表示不能放下。 即使所有元素都支持放置目标事件，这些元素默认也是不允许放置的。如果把元素拖动到不允许放置的 目标上，无论用户动作是什么都不会触发 drop 事件。

不过，通过覆盖 dragenter 和 dragover 事件的默认行为，可以把任何元素转换为有效的放置目标。 例如，如果有一个 ID 为"droptarget"的<div>元素，那么可以使用以下代码把它转换成一个放置目标：

let droptarget = document.getElementById("droptarget");

droptarget.addEventListener("dragover", (event) => {
  event.preventDefault();
});
droptarget.addEventListener("dragenter", (event) => {
  event.preventDefault();
});

执行上面的代码之后，把元素拖动到这个<div>上应该可以看到光标变成了允许放置的样子。另外， drop 事件也会触发。

在 Firefox 中，放置事件的默认行为是导航到放在放置目标上的 URL。这意味着把图片拖动到放置 目标上会导致页面导航到图片文件，把文本拖动到放置目标上会导致无效 URL 错误。为阻止这个行为， 在 Firefox 中必须取消 drop 事件的默认行为：

droptarget.addEventListener("drop", (event) => {
  event.preventDefault();
});