技術標籤：學習筆記js

整個過程，需要經歷以下三個事件：

  // 1. dragstart 拖拽開始
  // 2. dragover 拖拽中
  // 3. drop 放下拖拽的元素

1.拖拽開始【拖拽的元素 img，監聽dragstart事件】：

img.addEventListener(“dragstart”, function (e) {
// (1)開始拖拽時，把拖拽元素的資料資訊儲存起來。
// 儲存資料的目的是為了，讓容器能夠接收到img
// 使用 dataTransfer 進行資料傳輸
e.dataTransfer.setData(“imgId”, img.id);
console.log(“開始拖拽”);

2.拖拽中：

box.addEventListener(“dragover”, function (e) {
// 預設情況下，執行dragover事件時，，不允許進入drop事件中。
e.preventDefault(); //允許放下拖拽的元素
console.log(“拖拽中”);
});

3.拖拽結束：

box.addEventListener(“drop”, function (e) {
console.log(“放下拖拽元素”);
// 獲取傳遞過來的資料（id）
let id = e.dataTransfer.getData(“imgId”);
// console.log(id);
// 根據id獲取img標籤