vue.draggable多列数组拖拽拿到当前列的title,title=1的禁止拖拽

可以通过在拖拽开始时判断当前拖拽的元素所在的列是否为 `title=1` 来禁止拖拽。具体实现可以参考以下代码：

<template>
  <div>
    <div v-for="(col, index) in columns" :key="index" class="column">
      <div class="title" v-if="col.title === 1">{{ col.title }}</div>
      <draggable
        v-else
        :list="col.items"
        :group="{ name: 'columns', pull: 'clone', put: false }"
        :options="{animation: 150, handle: '.handle'}"
        @start="handleDragStart(index)"
        @end="handleDragEnd"
      >
        <div v-for="(item, itemIndex) in col.items" :key="itemIndex" class="item">
          <div class="handle">drag</div>
          <div class="content">{{ item }}</div>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      columns: [
        {
          title: 1,
        },
        {
          title: 2,
          items: ['item 1', 'item 2', 'item 3'],
        },
        {
          title: 3,
          items: ['item 4', 'item 5', 'item 6'],
        },
      ],
    };
  },
  methods: {
    handleDragStart(index) {
      // 如果当前列的 title 为 1，则禁止拖拽
      if (this.columns[index].title === 1) {
        this.$nextTick(() => {
          this.$refs[index].draggable.cancel();
        });
      }
    },
    handleDragEnd() {
      console.log('drag end');
    },
  },
};
</script>

在上述代码中，我们使用了 `vuedraggable` 组件来实现多列数组拖拽。在每个列的 `draggable` 组件上，我们监听了 `start` 事件，在事件处理函数中通过判断当前列的 title 是否为 1 来决定是否禁止拖拽。如果需要禁止拖拽，则调用 `cancel()` 方法取消拖拽。

需要注意的是，由于 `vuedraggable` 组件渲染时会复用 DOM 元素，因此需要通过 `this.$nextTick()` 来确保可取消拖拽。同时，为了方便取消拖拽，我们在每个 `draggable` 组件上添加了 `ref` 属性，并在 `handleDragStart` 方法中使用 `this.$refs[index]` 来获取当前列的 `draggable` 实例。