html5使用drag和drop实现拖放 html5使用交互API的实战案例

<div class="board">
  <div class="column" id="todo" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h3>待办任务</h3>
    <div class="task" draggable="true" ondragstart="dragStart(event)" data-id="1">写页面结构</div>
    <div class="task" draggable="true" ondragstart="dragStart(event)" data-id="2">添加拖放逻辑</div>
  </div>

  <div class="column" id="done" ondrop="drop(event)" ondragover="allowDrop(event)">
    <h3>已完成</h3>
  </div>
</div>

function allowDrop(event) {
  event.preventDefault(); // 允许放置
}

function dragStart(event) {
  event.dataTransfer.setData("text/plain", event.target.dataset.id);
  event.target.classList.add("dragging");
}

function drop(event) {
  event.preventDefault();
  const taskId = event.dataTransfer.getData("text/plain");
  const taskElement = document.querySelector(`[data-id="${taskId}"]`);

  // 将任务添加到目标列
  event.target.appendChild(taskElement);
  taskElement.classList.remove("dragging");
}

.dragging {
  opacity: 0.6;
  transform: scale(1.05);
}

fetch('/api/update-task', {
  method: 'POST',
  body: JSON.stringify({ id: taskId, status: 'done' })
});