零依赖实现一个看板/列表任务工具

有个任务管理工具的需求：要支持看板视图和列表视图切换，任务能拖拽排序。我给自己的约束是：零外部依赖，纯 HTML/CSS/JS。

先把数据模型定清楚

一切从一份数组开始，视图只是它的投影：

const tasks = [
  { id: 1, title: "写 PRD", status: "todo", order: 0 },
  { id: 2, title: "联调接口", status: "doing", order: 0 },
];

看板按 status 分组，列表按 order 排。切换视图只是换渲染函数，不碰数据。

拖拽不一定要库

现代浏览器有原生拖拽 API，配合 draggable 属性就能做：

el.draggable = true;
el.addEventListener("dragstart", e => e.dataTransfer.setData("id", id));
el.addEventListener("drop", e => {
  const id = e.dataTransfer.getData("id");
  moveTask(id, targetStatus, targetIndex);
});

移动端没有拖拽事件，要用 touch 系列补一套——这是纯 JS 实现里最磨人的部分，但也就几十行。

为什么坚持零依赖

这类小工具，引一个拖拽库往往比自己写还重，而且定制受限。纯实现的好处是：你完全懂它、能改它、没有版本债。

能徒手做的，就别先找库——先确认库真的省时间。

这也和我对工程的一贯态度一致：边界清晰、依赖最少、出事能自救。