拖放 (Drag & Drop) 功能的完整教學

<!-- HTML結構 -->
<div id="draggable-item" draggable="true" style="width:100px; height:100px; background:skyblue;">
  拖曳我!
</div>
<div id="drop-zone" style="width:200px; height:150px; border:2px dashed #ccc; margin-top:10px;">
  放下到這裡
</div>

<script>
// 取得元素引用
const dragItem = document.getElementById('draggable-item');
const dropZone = document.getElementById('drop-zone');

// 拖曳開始時,設定拖曳資料
dragItem.addEventListener('dragstart', event => {
  event.dataTransfer.setData('text/plain', event.target.id);
});

// 拖曳經過放置目標時,允許放下
dropZone.addEventListener('dragover', event => {
  event.preventDefault(); // 必須取消預設行為才能觸發 drop
});

// 放下拖曳元素時,將元素移動到目標容器
dropZone.addEventListener('drop', event => {
  event.preventDefault();
  const data = event.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(data);
  if (draggedElement) {
    dropZone.appendChild(draggedElement);
  }
});
</script>

const items = document.querySelectorAll('.draggable-item');  // 所有可拖曳項目
const zones = document.querySelectorAll('.drop-zone');       // 所有放置區域

items.forEach(item => {
  item.addEventListener('dragstart', onDragStart);
  item.addEventListener('dragend', onDragEnd);
});

zones.forEach(zone => {
  zone.addEventListener('dragover', onDragOver);
  zone.addEventListener('drop', onDrop);
  zone.addEventListener('dragenter', onDragEnter);
  zone.addEventListener('dragleave', onDragLeave);
});

function onDragStart(event) {
  // 設定拖曳資料 (使用元素的id作為識別)
  event.dataTransfer.setData('text/plain', event.target.id);
  // 視覺效果:拖曳時降低透明度
  event.target.style.opacity = '0.5';
}

function onDragEnd(event) {
  // 還原被拖曳元素的透明度
  event.target.style.opacity = '1';
}

function onDragOver(event) {
  event.preventDefault(); // 必須取消預設行為,否則無法觸發 drop
}

function onDrop(event) {
  event.preventDefault();
  // 取得被拖曳元素的id並找到對應元素
  const id = event.dataTransfer.getData('text/plain');
  const draggedEl = document.getElementById(id);
  if (draggedEl) {
    // 將被拖元素移到這個放置區中 (追加到最後)
    event.currentTarget.appendChild(draggedEl);
  }
}

function onDragEnter(event) {
  // 目標區域呈現可放置提示
  event.currentTarget.classList.add('drop-highlight');
}

function onDragLeave(event) {
  // 移除目標區域的提示樣式
  event.currentTarget.classList.remove('drop-highlight');
}

<ul id="todo-list" class="list">
  <li id="task1" class="task-item" draggable="true">???? 待辦事項 1</li>
  <li id="task2" class="task-item" draggable="true">???? 待辦事項 2</li>
  <li id="task3" class="task-item" draggable="true">???? 待辦事項 3</li>
</ul>

<ul id="done-list" class="list">
  <li id="done1" class="task-item" draggable="true">✅ 完成事項 A</li>
  <li id="done2" class="task-item" draggable="true">✅ 完成事項 B</li>
</ul>

.list {
  width: 45%;
  min-height: 150px;
  margin: 0 1%;
  padding: 10px;
  display: inline-block;
  vertical-align: top;
  border: 2px dashed #aaa;
}

.task-item {
  background: #f0f0f0;
  margin: 5px 0;
  padding: 8px;
  border: 1px solid #ccc;
  cursor: grab;             /* 提示可拖曳 */
}

.task-item:active {
  cursor: grabbing;         /* 拖曳時的鼠標樣式 */
}

.drop-highlight {
  background: #e0ffe0;      /* 放置區域高亮(淡綠底) */
}

const tasks = document.querySelectorAll('.task-item');
const lists = document.querySelectorAll('.list');
let draggedItem = null;  // 用於儲存目前拖曳的項目

tasks.forEach(item => {
  item.addEventListener('dragstart', event => {
    draggedItem = item;  // 紀錄拖曳中的項目
    event.dataTransfer.setData('text/plain', item.id);
    event.dataTransfer.effectAllowed = 'move';
    // 縮小被拖曳項目的不透明度,表示正在拖動
    item.style.opacity = '0.5';
  });
  item.addEventListener('dragend', () => {
    // 拖曳結束時還原透明度
    item.style.opacity = '1';
    draggedItem = null;
  });
  // 每個任務項目本身也作為drop target以支援在項目間放置
  item.addEventListener('dragover', event => {
    event.preventDefault(); // 允許在另一項目上方放置
  });
  item.addEventListener('drop', event => {
    event.preventDefault();
    if (draggedItem) {
      const currentList = event.currentTarget.parentNode;
      // 將拖曳的項目插入到當前項目之前
      currentList.insertBefore(draggedItem, event.currentTarget);
    }
  });
});

lists.forEach(list => {
  list.addEventListener('dragover', event => {
    event.preventDefault();  // 允許放置到列表
  });
  list.addEventListener('drop', event => {
    event.preventDefault();
    if (draggedItem) {
      // 如果在列表空白處放下,將項目移動到該列表底部
      list.appendChild(draggedItem);
    }
  });
  list.addEventListener('dragenter', event => {
    // 高亮顯示可放置的列表區域
    event.currentTarget.classList.add('drop-highlight');
  });
  list.addEventListener('dragleave', event => {
    // 移除高亮樣式
    event.currentTarget.classList.remove('drop-highlight');
  });
});

let activeElement = null;
let offsetX = 0, offsetY = 0;

// 為可拖曳元素監聽觸控開始
draggableElement.addEventListener('touchstart', event => {
  const touch = event.touches[0];
  activeElement = event.currentTarget;
  // 記錄初始座標與元素位置差,讓元素跟隨手指偏移一致
  offsetX = touch.clientX - activeElement.getBoundingClientRect().left;
  offsetY = touch.clientY - activeElement.getBoundingClientRect().top;
  // 暫時以絕對定位,才能移動位置
  activeElement.style.position = 'absolute';
  // 為避免觸發畫面滾動,取消預設行為
  event.preventDefault();
});

draggableElement.addEventListener('touchmove', event => {
  if (!activeElement) return;
  const touch = event.touches[0];
  // 更新被拖曳元素的位置,使其跟隨手指移動
  activeElement.style.left = (touch.clientX - offsetX) + 'px';
  activeElement.style.top = (touch.clientY - offsetY) + 'px';
  // 可選:透過 elementFromPoint 找出當前手指下的元素,進行放置區域高亮等操作
  const target = document.elementFromPoint(touch.clientX, touch.clientY);
  // ... 可以在這裡對 target 判斷,加入高亮類或其他提示
  event.preventDefault();
});

draggableElement.addEventListener('touchend', event => {
  if (!activeElement) return;
  // 手指放開時,確認落點目標
  const touch = event.changedTouches[0];
  const dropTarget = document.elementFromPoint(touch.clientX, touch.clientY);
  if (dropTarget && dropTarget.classList.contains('list')) {
    // 將拖曳元素附加到目標列表(容器)中
    dropTarget.appendChild(activeElement);
  }
  // 放置完畢後,清除狀態並還原元素位置模式
  activeElement.style.position = 'static';
  activeElement = null;
});

const img = new Image();
img.src = 'custom-drag.webp';
event.dataTransfer.setDragImage(img, 0, 0);

dropZone.addEventListener('drop', event => {
  if (event.currentTarget.id !== 'allowed-zone') return; // 非允許區域直接返回
  // ...合法區域的處理...
});