詳解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拖拽（二）拖拽的應用及示例。