(98)Wangdao.com_第三十天_拖拉事件

拖拉事件

拖拉 drag ，是指用戶在某個對象上按下鼠標鍵不放，拖動它到另外一個位置，而後釋放鼠標鍵，將該對象放在那裏。

一旦某個元素節點的 draggable 屬性設爲true，就沒法再用鼠標選中該節點內部的 文字 或 子節點 了

• 拖拉的對象：

除了 元素節點 默認不能夠拖拉，其餘（圖片、連接、選中的文字）都是能夠直接拖拉的

• 爲了讓 元素節點 可拖拉，能夠將該節點的 draggable 屬性設爲 true

• <div draggable="true"> 此區域可拖拉 </div>

圖片（<img>）和 連接（<a>）不加這個屬性，就能夠拖拉。

每每是將 draggable 其設爲 false，防止拖拉這兩種元素

• 當 元素節點 或 選中的文本 被拖拉時，就會持續觸發拖拉事件

 

drag            拖拉過程當中，在被拖拉的節點上持續觸發（相隔幾百毫秒）。

dragstart            用戶開始拖拉時，在被拖拉的節點上觸發

該事件的 target 屬性是被拖拉的節點。

一般應該在這個事件的監聽函數中，指定拖拉的數據。

dragend            拖拉結束時（釋放鼠標鍵或按下 ESC 鍵）在被拖拉的節點上觸發

該事件的 target 屬性是被拖拉的節點。

它與 dragstart 事件，在同一個節點上觸發。

無論拖拉是否跨窗口，或者中途被取消，dragend事件老是會觸發的。

• 在 某節點 觸發

dragenter            拖拉進入 某節點 時，在 某節點 上觸發一次

該事件的 target 屬性是 某節點。

一般應該在這個事件的監聽函數中，指定是否容許在 某節點 放下（drop）拖拉的數據。

若是 某節點 沒有該事件的監聽函數，或者 監聽函數不執行任何操做，就意味着不容許在當前節點放下數據。

在視覺上顯示拖拉進入當前節點，也是在這個事件的監聽函數中設置。

dragover            拖拉到 某節點 上方時，在 某節點 上持續觸發（相隔幾百毫秒）

該事件的 target 屬性是 某節點 。

該事件與 dragenter 事件的區別是

• dragenter事件在進入該節點時觸發
• 只要沒有離開這個節點，dragover 事件會持續觸發。

dragleave            拖拉操做離開 某節點 範圍時，在 某節點 上觸發一次

該事件的 target 屬性是當前節點

若是要在視覺上顯示拖拉離開操做當前節點，就在這個事件的監聽函數中設置。

drop            被拖拉的節點或選中的文本，釋放到 某節點 時，在 某節點 上觸發

注意： 

• 若是 某節點 不容許 drop，即便在該節點上方鬆開鼠標鍵，也不會觸發該事件
• 若是用戶按下 ESC 鍵，取消這個操做，也不會觸發該事件

該事件的監聽函數負責取出拖拉數據，並進行相關處理

• 實例：

動態改變被拖動節點的背景色

• div.addEventListener('dragstart', function (e) {
      this.style.backgroundColor = 'red';
  }, false);
  
  div.addEventListener('dragend', function (e) {
      this.style.backgroundColor = 'green';
  }, false);