vue.draggable拖拽拿到数组title

如果你正在使用 `vue.draggable` 插件，你可以使用 `@change` 事件来监听拖拽的变化，并且在事件处理函数中获取拖拽后的数组。以下是一个示例：

<draggable v-model="title" @change="handleChange">
  <div v-for="item in title" :key="item">{{ item }}</div>
</draggable>

export default {
  data() {
    return {
      title: ["Title 1", "Title 2", "Title 3"]
    };
  },
  methods: {
    handleChange(newOrder) {
      // newOrder 变量包含拖拽后的数组
      console.log(newOrder);
    }
  }
};

当你拖拽 `vue.draggable` 中的元素时，`handleChange` 方法会被调用，并且将拖拽后的数组作为参数传递给它。你可以在这个方法中使用这个数组来更新你的数据或执行其他操作。

相关问题

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` 实例。

vue.draggable.next

vue.draggable.next是一个基于Sortable.js实现的Vue 3拖拽插件。它可以用于拖拽列表、菜单、工作台、选项卡等常见的工作场景。通过安装插件，并引入VueDraggableNext组件，你可以在Vue 3项目中使用这个插件来实现可拖拽的列表功能。这个插件在开发过程中被认为是优雅、简洁且易于使用的。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3拖拽插件Vue.Draggable.next](https://blog.csdn.net/m0_46627407/article/details/125624211)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]