如何为vuetify draggable添加规则限制课程无效拖拽？

你之前绑定的:rules="courseRules"不生效的核心原因是：rules是Vuetify表单类组件（比如v-input、v-form）的专属校验属性，vue-draggable作为独立的拖拽封装组件，本身没有实现对rules属性的逻辑支持，写在组件上不会被解析执行。

vue-draggable本身提供了move事件钩子，会在拖拽元素尝试进入目标容器时实时触发，在这个钩子里做校验可以直接阻止不符合要求的拖拽落地，不会出现UI闪烁。

实现步骤 #

• 删除模板中无效的:rules="courseRules"绑定
• 给每个课程表日期列的draggable组件绑定move事件，在事件回调中做授课日期合法性校验，返回false即可直接阻止拖拽落地
• 校验不通过时触发项目里的全局提示/v-snackbar错误提示即可

参考代码 #

模板部分修改 #

<v-card class="ma-2 pa-2">
  <draggable 
    :id="index" 
    v-model="course" 
    :options="{group:'course'}" 
    @start="drag=true"
    @end="drag=false" 
    @add="newCourse"
    @move="checkCourseAllow($event, index)"
  >
    <v-card-title class="headline">
      {{ capLetter(index) }}
    </v-card-title>
  </draggable>
</v-card>

逻辑部分实现 #

// 组件methods中添加校验方法
methods: {
  checkCourseAllow(evt, targetWeekDay) {
    // 取出当前正在拖拽的课程数据
    const currentCourse = evt.draggedContext.element
    // 校验逻辑：判断当前目标日期是否在课程允许授课的日期列表中
    // 这里根据你自己的课程数据结构调整判断条件即可
    const isAllow = currentCourse.availableWeekDays.includes(targetWeekDay)
    
    if (!isAllow) {
      // 弹出错误提示，这里替换成你项目用的提示组件/方法即可
      this.$snackbar.open({
        text: `该课程不支持在${this.capLetter(targetWeekDay)}授课`,
        color: 'error'
      })
      // 返回false直接阻止拖拽落地
      return false
    }
    return true
  },
  // 原有其他方法保留
  newCourse(evt) {
    // 原有新增课程逻辑
  },
  capLetter(idx) {
    // 原有日期名称格式化逻辑
  }
}

你也可以在原有的@add事件回调中做校验，这个事件是拖拽元素已经落地到目标容器后才触发的，校验不通过时需要手动把刚添加的非法课程从数组中移除：

newCourse(evt) {
  const addedIndex = evt.newIndex
  const addedCourse = this.course[addedIndex]
  const targetWeekDay = Number(evt.to.id) // 从目标容器id取当前日期标识
  const isAllow = addedCourse.availableWeekDays.includes(targetWeekDay)
  
  if (!isAllow) {
    // 移除非法添加的课程
    this.course.splice(addedIndex, 1)
    // 弹出错误提示
    this.$snackbar.open({text: '课程不支持添加到当前日期', color: 'error'})
    return
  }
  // 原有正常新增逻辑
}

这个方案的缺点是拖拽元素会先落到目标区域再被移除，会出现明显的UI闪烁，交互体验远不如move事件前置拦截的方案。

• 如果你用的是vuedraggable 4.x以上版本，options属性已经被拆成了单独的props，group可以直接写group="course"不用包在options里，不影响move事件的使用
• 如果你需要更复杂的拖拽校验（比如判断课程时间冲突），逻辑都可以直接写在checkCourseAllow方法里，只要最终返回布尔值即可控制是否允许落地
• 不要尝试用Vuetify的表单rules去适配非表单类组件，这类组件不会主动触发rules校验逻辑

内容的提问来源于stack exchange，提问作者symphony coder