详解javascript拖拽（一）基础介绍

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

拖拽的历史

拖拽成为一项标准也是近几年的事，属于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拖拽（二）拖拽的应用及示例。