7.3 練習 - 其它事件

其它拖曳相關的事件

• dragenter：當元素拖曳「進去」指定區域時觸發。

• dragleave：當元素拖曳「離開」指定區域時觸發。

• dragend：拖曳效果結束時觸發。

加一小段 CSS：

.enter{
  background-color: lightgray;
}

再加以下的 js 程式：

// 拖曳進去
div1.addEventListener("dragenter", function(e){
  div1.classList.add("enter"); // 加上 class
});
// 拖曳離開
div1.addEventListener("dragleave", function(e){
  div1.classList.remove("enter"); // 移除 class
});


// 拖曳效果整個結束
drag1.addEventListener("dragend", function(e){
  alert("拖曳效果結束");
});

結果示意 ( https://youtu.be/Px-bHO5gW_A )：

參考作法( https://codepen.io/carlos411/pen/LYjKNLj )：