---
tags: homework
---

https://codepen.io/Jao_11102/pen/BaqNzVX

問題1

  function ondragstart(e) {
    const tr = e.target.closest("tr");
    // 這邊有確實抓到 <tr></tr>, 但仔細看他並沒有 data-id 屬性
    console.log("tr", tr);

    e.dataTransfer.setDragImage(tr, 300, 50);
    // 因為沒有 data-id 屬性, 所以 getAttribute 出來是 null
    draggingTaskId = tr.getAttribute("data-id");
    console.log("draggingTaskId", draggingTaskId);
  }

問題2

  function ondragenter(e) {
    // 這邊也是一樣, <tr> 並沒有 data-id, 所以抓出來也是 null
    dropTargetTaskId = e.target.closest("tr").getAttribute("data-id");
    console.log("dropTargetTaskId", dropTargetTaskId);
  }

所以 data-id 到底是什麼?要怎樣才能讓 `<tr>` 有 data-id 呢?首先 data-id 並不是一個內建的屬性, 而是寫程式的人自己加上去的屬性, 之所以要加上去是因為我們需要知道該 `<tr>` 位於什麼位置,而在 drag 事件中交換抓起來與放下去的 `<tr>`

圖解:

問題3

  function onDragEnd() {
    if (
      draggingTaskId === undefined ||
      dropTargetTaskId === undefined ||
      draggingTaskId === dropTargetTaskId
    )
      return;
      
    // 在我的範例中有寫了一個 exchangeTask function, 但在這裡沒有, 所以當然不會有功能
    exchangeTask(draggingTaskId, dropTargetTaskId);
    draggingTaskId = undefined;
    dropTargetTaskId = undefined;
  }

解決辦法:
1. 想辦法在 tr 中加入 data-id
2. 交換 tr