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();
});
执行上面的代码之后,把元素拖动到这个
在 Firefox 中,放置事件的默认行为是导航到放在放置目标上的 URL。这意味着把图片拖动到放置 目标上会导致页面导航到图片文件,把文本拖动到放置目标上会导致无效 URL 错误。为阻止这个行为, 在 Firefox 中必须取消 drop 事件的默认行为:
droptarget.addEventListener("drop", (event) => {
event.preventDefault();
});