人類喜歡將工作或活動步驟化:第一步、第二步、第三步等，因為分解讓人類得以分工並優化區域性。 一個作家構思一部鴻篇鉅製，必然要考慮將內容劃分為幾個部分，每個部分刻畫相應的人物背景故事. 同理，我們也將今天的主角拖拽分為 拖、放兩個步驟，來討論分析.
拖拽的歷史
拖拽成為一項標準也是近幾年的事，屬於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拖拽（二）拖拽的應用及示例。