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 ):
Last updated