如何用ThinkPHP做多列表拖拽-php教程-PHP中文网

thinkphp可通过结合sortablejs实现多列表拖拽功能：前端用group配置支持跨列表拖拽并提交排序及列表id数据，后端批量更新数据库的list_id和sort_order字段，查询时按list_id分组并依sort_order排序渲染。

如何用thinkphp做多列表拖拽

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 配置实现跨列表拖拽：

PHP

编写健壮的PHP代码，规避类型转换陷阱、数组怪癖及常见安全漏洞。

下载

<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 为例）：

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();

模板中循环输出，为每个

或

添加 data-id 属性供 Sortable 识别。