拖拉事件

拖拉 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);