人類喜歡將工作或活動步驟化:第一步、第二步、第三步等，因為分解讓人類得以分工並優化區域性。 一個作家構思一部鴻篇鉅製，必然要考慮將內容劃分為幾個部分，每個部分刻畫相應的人物背景故事. 同理，我們也將今天的主角拖拽分為 拖、放兩個步驟，來討論分析.

拖拽的歷史

拖拽成為一項標準也是近幾年的事，屬於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拖拽（二）拖拽的應用及示例