JavaScript拖拽详解（一）基础简介

人类喜欢将自然界的事物步骤化，第一步干什么，第二步再做什么，甚至第三部等等。
一个作家构思一部鸿篇巨制，必然要考虑将内容划分为几个部分，每个部分刻画相应的人物背景故事.
同理，拖拽也一样，分为 拖、放两个步骤，本文将以两个步骤为基础讨论拖拽.

拖拽的历史

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

拖放会冒泡嘛？

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

小结

本文讲解了拖拽的基础知识，下节我们使用拖拽几个有用的例子。