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

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

在HTML5标准实施之前，拖拽也是被广泛使用的，web开发者将click、mouseover,mousemove组合起来实现拖拽逻辑，过程略显冗余和繁琐。

一言蔽之，HTML5的出现让拖拽开发变得简单

下图描绘了拖拽的流程.

结合上图，我们梳理下知识点，做个拆分与解析。

设置了draggable为true的元素。
可用鼠标选择的文字。（科普下，禁止选择文字：wordContainerEle.onselectstart = event => false;)，返回false.

这意味着：

需要说明的是，一个元素被设置draggable之后，里面的文本就无法被选中了（chrome测试如此）。

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

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