使用 HTML + JavaScript 实现可拖拽的任务看板系统

本文将介绍如何使用 HTML、CSS 和 JavaScript 创建一个交互式任务看板系统。该系统支持拖拽任务、添加新任务以及动态创建列，适用于任务管理和团队协作场景。

效果演示

页面结构

HTML 部分主要包含三个默认的任务列（待办、进行中、已完成）和一个用于添加新列的按钮。

<div class="board" id="board"><div class="column" id="todo-column"><div class="column-title">待办</div><div class="task-list" id="todo-list"><div class="task" draggable="true">设计登录页面UI</div><div class="task" draggable="true">编写API接口文档</div><div class="task" draggable="true">项目需求评审会议</div></div><div class="add-task" onclick="showAddTaskForm('todo-list')">添加任务</div></div><!-- 其他两个列 --><div class="add-column" onclick="addNewColumn()"><div class="add-column-icon">+</div><div>添加新列</div></div>
</div>

核心功能实现

拖拽功能实现

完整的拖拽逻辑包括拖拽开始、结束、移动和放置操作。

首先，获取拖拽容器的元素用来绑定拖拽时间，定义一个变量用于保存当前正在被拖动的任务项

const board = document.getElementById('board');
let draggedTask = null;

拖拽开始

board.addEventListener('dragstart', function(e) {if (e.target.classList.contains('task')) {draggedTask = e.target;setTimeout(() => {e.target.classList.add('dragging');}, 0);}
});

拖拽过程

board.addEventListener('dragover', function(e) {e.preventDefault();const afterElement = getDragAfterElement(e.target.closest('.task-list'), e.clientY);const draggingTask = document.querySelector('.dragging');if (draggingTask && e.target.closest('.task-list')) {const list = e.target.closest('.task-list');if (afterElement) {list.insertBefore(draggingTask, afterElement);} else {list.appendChild(draggingTask);}}
});

拖拽结束

board.addEventListener('dragend', function(e) {if (e.target.classList.contains('task')) {e.target.classList.remove('dragging');}
});

获取拖拽后应该放置的位置

function getDragAfterElement(container, y) {const draggableElements = [...container.querySelectorAll('.task:not(.dragging)')];return draggableElements.reduce((closest, child) => {const box = child.getBoundingClientRect();const offset = y - box.top - box.height / 2;if (offset < 0 && offset > closest.offset) {return { offset: offset, element: child };} else {return closest;}}, { offset: Number.NEGATIVE_INFINITY }).element;
}

添加任务功能

当用户点击“添加任务”按钮时，会动态创建一个任务输入表单，替换原来的按钮，供用户输入新任务内容。

function showAddTaskForm(listId) {const list = document.getElementById(listId);const addButton = list.nextElementSibling;// 检查是否已存在表单if (list.querySelector('.task-form')) return;// 创建表单const form = document.createElement('div');form.className = 'task-form';form.innerHTML = `<input type="text" class="task-input" placeholder="输入任务内容..." autofocus><div class="btn-group"><button class="btn btn-primary" onclick="addTask('${listId}')"><span>添加任务</span></button><button class="btn btn-outline" onclick="cancelAddTask('${listId}')"