【重构前端知识体系之HTML】HTML5的新特性——拖放

【重构前端知识体系之HTML】HTML5的新特性——拖放

内容速递

引言

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖放的操作，多用在拖拽排序列表、游戏拼图等。

下文中出现拖放与拖拽表达同一个意思。

官方介绍

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。

拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。

文档

可以查看拖放的一些API，包含了相关接口的说明、在应用程序中加入拖放支持的基本步骤，以及相关接口的使用简介。

文档地址：官方文档

拖拽事件

主要有八个主要的事件，完成拖拽着歌过程一系列的事件响应。

事件

事件函数

触发时刻

drag

ondrag

当拖拽元素或选中的文本时触发。

dragend

ondragend

当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键).。

dragenter

ondragenter

当拖拽元素或选中的文本到一个可释放目标时触发。

dragexit

ondragexit

当元素变得不再是拖拽操作的选中目标时触发。

dragleave

ondragleave

当拖拽元素或选中的文本离