人类喜欢将自然界的事物步骤化,第一步干什么,第二步再做什么,甚至第三部等等。
一个作家构思一部鸿篇巨制,必然要考虑将内容划分为几个部分,每个部分刻画相应的人物背景故事.
同理,拖拽也一样,分为 拖、放两个步骤,本文将以两个步骤为基础讨论拖拽.
拖拽的历史
web开发中的拖拽标准是在HTML5中定义规范的.
但是,拖拽作为一项交互行为被广泛使用在桌面应用中。
甚至在HTML5标准之前,拖拽也是被广泛使用的,web开发者需要将click、mouseover,mousemove组合来实现,过程略显冗余和繁琐。
HTML5的出现让拖拽开发变得简单
画一张流程图
要点概括总结
结合上图,我们梳理下知识点,做个拆分与解析。
一共有哪些事件
拖:dragstart
,drag
,dragend
放:dragenter
,dragover
,dragleave
,drop
哪些实体可以被拖
- 设置了draggable为true的元素。
- 可用鼠标选择的文字。(科普下,禁止选择文字:
wordContainerEle.onselectstart = event => false;
),返回false.
这意味着:
- 元素默认禁止拖拽(貌似都是),需要手动设置draggable属性为true。
- 文字默认都是能选中的,这个大家都习以为常了。
需要说明的是,一个元素被设置draggable之后,里面的文本就无法被选中了(chrome测试如此)。
关于放,有哪些限制?
dragenter
:都可以。
dragover
:都可以
dragleave
:都可以
drop
:只有在dragover监听中阻止默认行为,才能触发drop
拖放会冒泡嘛?
答案是肯定的。假设一个父元素包含一个子元素,理所当然地,用户拖子元素也是间接的拖动父元素的过程。
小结
本文讲解了拖拽的基础知识,下节我们使用拖拽几个有用的例子。