人类喜欢将工作或活动步骤化:第一步、第二步、第三步等，因为分解让人类得以分工并优化局部。 一个作家构思一部鸿篇巨制，必然要考虑将内容划分为几个部分，每个部分刻画相应的人物背景故事. 同理，我们也将今天的主角拖拽分为 拖、放两个步骤，来讨论分析.

拖拽的历史

拖拽成为一项标准也是近几年的事，属于HTML5中的一部分，作为一种交互行为，拖拽是被广泛应用再界面软件中的，例如桌面应用，word、QQ软件都有拖拽行为。

在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

拖放会冒泡嘛？

答案是肯定的。假设一个父元素包含一个子元素，理所当然地，用户拖子元素也是间接的拖动父元素的过程。

小结

本文讲解了拖拽的基础知识，接下来讨论下拖拽的应用以及实例:。