限制多列表拖拽最大数量需在目标端拦截校验，通过动态 put 函数判断目标列表长度是否超限，如 Vue.Draggable 中用 put: (to, from) => to.children.length < max 控制接收。
限制多列表拖拽的最大数量，核心在于控制“放入”行为——即当目标列表已满时，拒绝接收新拖入的项。这不能靠单纯限制源列表拖出数量实现，而必须在目标端拦截并校验。
用 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：
-
pull: 'clone'允许克隆拖出但不减少原列表数量 put: (to) => to === pendingListRef && pendingList.length —— 仅待办列允许最多5项put: (to) => to === doneListRef && doneList.length —— 已完成列最多3项
拖拽中实时反馈与视觉提示
仅拦截不够直观。建议配合以下增强体验：
- 拖入时目标区域高亮变红或显示“已达上限”文字
- 用
ghost-class或dragClass设置禁放状态下的悬浮样式 - 在
@end（Vue）或onEnd（React）中检查是否被拒绝，并给出 Toast 提示
关键不是阻止拖动本身，而是精准拦截“放置”动作，并让规则对用户可见。不复杂但容易忽略。
