1. 程式人生 > >詳解javascript拖拽(一)基礎介紹

詳解javascript拖拽(一)基礎介紹

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

拖拽的歷史

拖拽成為一項標準也是近幾年的事,屬於HTML5中的一部分,作為一種互動行為,拖拽是被廣泛應用再介面軟體中的,例如桌面應用,word、QQ軟體都有拖拽行為。

在HTML5標準實施之前,拖拽也是被廣泛使用的,web開發者將click、mouseover,mousemove組合起來實現拖拽邏輯,過程略顯冗餘和繁瑣。

一言蔽之,HTML5的出現讓拖拽開發變得簡單

先來一張流程圖

下圖描繪了拖拽的流程.

在這裡插入圖片描述

要點概括總結

結合上圖,我們梳理下知識點,做個拆分與解析。

一共有哪些事件
  • 拖:dragstart,drag,dragend
  • 放:dragenter,dragoverdragleave,drop
哪些實體可以被拖
  • 設定了draggable為true的元素。
  • 可用滑鼠選擇的文字。(科普下,禁止選擇文字:wordContainerEle.onselectstart = event => false;),返回false.

這意味著:

  • 元素預設禁止拖拽(貌似都是),需要手動設定draggable屬性為true。
  • 文字預設都是能選中的,這個大家都習以為常了。

需要說明的是,一個元素被設定draggable之後,裡面的文字就無法被選中了(chrome測試如此)。

關於放,有哪些限制?
  • dragenter:都可以。
  • dragover:都可以
  • dragleave:都可以
  • drop:只有在dragover監聽中阻止預設行為,才能觸發drop
拖放會冒泡嘛?

答案是肯定的。假設一個父元素包含一個子元素,理所當然地,使用者拖子元素也是間接的拖動父元素的過程。

小結

本文講解了拖拽的基礎知識,接下來討論下拖拽的應用以及例項:詳解javascript拖拽(二)拖拽的應用及示例