55、HTML5 新特性：拖放、媒体元素与历史状态管理

HTML5 新特性：拖放、媒体元素与历史状态管理

1. 原生拖放

在网页交互中，拖放功能为用户提供了更加直观和便捷的操作体验。HTML5 为我们带来了强大的原生拖放支持。

1.1 dropEffect 和 effectAllowed 属性

dropEffect 属性用于指定拖放操作的效果，有以下几种取值：
- “copyLink”：允许 “copy” 和 “link” 效果。
- “copyMove”：允许 “copy” 和 “move” 效果。
- “linkMove”：允许 “link” 和 “move” 效果。
- “all”：允许所有 dropEffect 值。

这个属性必须在 ondragstart 事件处理程序中设置。例如，若想让用户将文本从文本框移动到 <div> 中，需要将 dropEffect 和 effectAllowed 都设置为 “move”。不过，文本不会自动移动，因为 <div> 的拖放事件默认行为是什么都不做。若覆盖默认行为，文本会自动从文本框中移除，之后需要手动将其插入到 <div> 中完成操作。若将 dropEffect 和 effectAllowed 改为 “copy”，文本框中的文本不会自动移除。

需要注意的是，Firefox 5 及以下版本在设置 effectAllowed 属性时存在问题，可能导致拖放事件无法触发。

1.2 元素的可拖动性

默认情况下，图像、链接和文本是可拖动的。文本需要先