ThinkPHP可通过结合SortableJS实现多列表拖拽功能：前端用group配置支持跨列表拖拽并提交排序及列表ID数据，后端批量更新数据库的list_id和sort_order字段，查询时按list_id分组并依sort_order排序渲染。
ThinkPHP 本身不内置多列表拖拽功能，但可以结合前端拖拽库（如 SortableJS）与 ThinkPHP 的数据持久化能力，实现多列表之间的元素拖拽排序和跨列表移动。核心在于：前端处理拖拽交互与数据提交，后端接收并更新数据库中的排序字段或所属列表标识。
1. 数据库设计要支持多列表和排序
每个可拖拽项需至少两个关键字段：
- list_id：标识所属列表（如 1=待办、2=进行中、3=已完成）
- sort_order：在当前列表内的显示顺序（整数，越小越靠前）
例如数据表 task_items 结构：id | title | list_id | sort_order | created_at
2. 前端用 SortableJS 实现多列表联动
引入 SortableJS，为每个列表容器添加 class，并启用 group 配置实现跨列表拖拽：
<div id="list-1" class="task-list" data-list-id="1"></div>
<div id="list-2" class="task-list" data-list-id="2"></div>
<div id="list-3" class="task-list" data-list-id="3"></div>
<script>
new Sortable(document.querySelectorAll('.task-list'), {
group: 'shared',
animation: 150,
onEnd: function(evt) {
const items = Array.from(evt.to.children).map((el, idx) => ({
id: el.dataset.id,
list_id: evt.to.dataset.listId,
sort_order: idx + 1
}));
// 提交到 ThinkPHP 接口
fetch('{:url("Task/updateOrder")}', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items })
});
}
});
</script>
3. ThinkPHP 后端批量更新排序与列表归属
在控制器中接收 JSON 数据，校验后批量写入数据库（以 TP6 为例）：
立即学习“PHP免费学习笔记（深入）”；
public function updateOrder()
{
$data = $this->request->param();
$items = $data['items'] ?? [];
if (empty($items)) {
return json(['code' => 0, 'msg' => '无数据']);
}
$db = Db::name('task_items');
foreach ($items as $item) {
$db->where('id', $item['id'])
->update([
'list_id' => $item['list_id'],
'sort_order'=> $item['sort_order']
]);
}
return json(['code' => 1, 'msg' => '更新成功']);
}
注意：生产环境应加事务、ID 过滤、权限校验（如只允许操作自己创建的任务）。
4. 列表渲染时按 list_id + sort_order 查询
每个列表单独查数据，确保顺序正确：
// 获取待办列表（list_id = 1）
$todoList = Db::name('task_items')
->where('list_id', 1)
->order('sort_order', 'asc')
->select();
// 获取进行中列表（list_id = 2）
$doingList = Db::name('task_items')
->where('list_id', 2)
->order('sort_order', 'asc')
->select();
模板中循环输出，为每个 <li> 或 <div> 添加 data-id 属性供 Sortable 识别。
