人类喜欢将工作或活动步骤化:第一步、第二步、第三步等，因为分解让人类得以分工并优化局部。 一个作家构思一部鸿篇巨制，必然要考虑将内容划分为几个部分，每个部分刻画相应的人物背景故事. 同理，我们也将今天的主角拖拽分为 拖、放两个步骤，来讨论分析.
拖拽的历史
拖拽成为一项标准也是近几年的事，属于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
拖放会冒泡嘛？
答案是肯定的。假设一个父元素包含一个子元素，理所当然地，用户拖子元素也是间接的拖动父元素的过程。
小结
本文讲解了拖拽的基础知识，接下来讨论下拖拽的应用以及实例:详解javascript拖拽（二）拖拽的应用及示例。
