【重构前端知识体系之HTML】HTML5的新特性——拖放
内容速递
引言
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
拖放的操作,多用在拖拽排序列表、游戏拼图等。
下文中出现拖放
与拖拽
表达同一个意思。
官方介绍
HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。
拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。
文档
可以查看拖放的一些API,包含了相关接口的说明、在应用程序中加入拖放支持的基本步骤,以及相关接口的使用简介。
文档地址:官方文档
拖拽事件
主要有八个主要的事件,完成拖拽着歌过程一系列的事件响应。
事件
事件函数
触发时刻
drag
ondrag
当拖拽元素或选中的文本时触发。
dragend
ondragend
当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键).。
dragenter
ondragenter
当拖拽元素或选中的文本到一个可释放目标时触发。
dragexit
ondragexit
当元素变得不再是拖拽操作的选中目标时触发。
dragleave
ondragleave
当拖拽元素或选中的文本离