限制多列表拖拽最大数量需在目标端拦截校验，通过动态 put 函数判断目标列表长度是否超限，如 vue.draggable 中用 put: (to, from) => to.children.length

限制多列表拖拽的最大数量，核心在于控制“放入”行为——即当目标列表已满时，拒绝接收新拖入的项。这不能靠单纯限制源列表拖出数量实现，而必须在目标端拦截并校验。

用 put 配置控制可接收数量

Vue.Draggable 和 React SortableJS 都支持 put 选项（或类似逻辑），它决定当前列表是否允许从其他组拖入元素。你可以把它变成一个动态函数：

• 在 Vue.Draggable 中：put: (to, from) => to.children.length
• 在 React SortableJS 中：通过 onAdd 回调返回 false 或调用 evt.cancel() 拦截非法添加
• 注意：to 是目标列表 DOM 容器，需用 children.length 或 ref.current?.children.length 获取当前项数

结合 group + pull/put 实现双向约束

若多个列表共用同一 group（如 group="tasks"），需为每个列表单独配置 pull 和 put：

Scale AI

Scale AI是一款AI学习资源工具，AI机器学习标注训练平台。

下载

• pull: 'clone' 允许克隆拖出但不减少原列表数量
• put: (to) => to === pendingListRef && pendingList.length —— 仅待办列允许最多5项
• put: (to) => to === doneListRef && doneList.length —— 已完成列最多3项

拖拽中实时反馈与视觉提示

仅拦截不够直观。建议配合以下增强体验：

• 拖入时目标区域高亮变红或显示“已达上限”文字
• 用 ghost-class 或 dragClass 设置禁放状态下的悬浮样式
• 在 @end（Vue）或 onEnd（React）中检查是否被拒绝，并给出 Toast 提示

关键不是阻止拖动本身，而是精准拦截“放置”动作，并让规则对用户可见。不复杂但容易忽略。