vue3 使用拖动插件vuedraggable@next

基本使用

下面是一个使用 Vue Draggable Next 的 Vue 3 组件示例。这个示例展示了一个可拖动的列表。

安装依赖

首先，确保安装了 Vue Draggable Next：

npm install vuedraggable@next

示例组件

<template>
  <div>
    <h2>可拖动列表</h2>
    <draggable v-model="items" :animation="200">
      <template #item="{ element }">
        <div class="list-item">
          {{ element }}
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  setup() {
    const items = ref(['Item 1', 'Item 2', 'Item 3', 'Item 4']);

    return {
      items,
    };
  },
};
</script>

<style>
.list-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: move;
}
</style>

说明

• 组件结构：使用 <draggable> 组件来包裹可拖动的项，v-model 用于绑定数据。
• 样式：简单的样式为列表项添加了一些间距和背景。
• 动画：通过 :animation 属性设置拖动时的动画效果。

使用

在你的主应用程序中引入并使用这个组件即可：

<template>
  <div id="app">
    <DraggableList />
  </div>
</template>

<script>
import DraggableList from './components/DraggableList.vue';

export default {
  components: {
    DraggableList,
  },
};
</script>

这样就可以在 Vue 3 应用中实现一个简单的拖动列表了！

2个列表互相拖动

<template>
  <div class="drag-container">
    <div>
      <h2>列表 1</h2>
      <draggable class="drag-list" :list="list1" group="items" @end="onEnd">
        <template #item="{ element }">
          <div class="drag-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>

    <div>
      <h2>列表 2</h2>
      <draggable class="drag-list" :list="list2" group="items" @end="onEnd">
        <template #item="{ element }">
          <div class="drag-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  setup() {
    const list1 = ref([
      { name: '项目 1-1' },
      { name: '项目 1-2' },
      { name: '项目 1-3' },
    ]);

    const list2 = ref([
      { name: '项目 2-1' },
      { name: '项目 2-2' },
      { name: '项目 2-3' },
    ]);

    const onEnd = () => {
      console.log('拖动结束', list1.value, list2.value);
    };

    return {
      list1,
      list2,
      onEnd,
    };
  },
};
</script>

<style scoped>
.drag-container {
  width: 600px;
  display: flex;
  justify-content: space-around;
}

.drag-list {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.drag-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: move;
}
</style>

• 运行效果
  

group属性配置介绍

vuedraggable@next 的 group 属性用于定义拖动组的名称，使得同一组内的多个 draggable 列表之间可以互相拖动项目。在你的示例中，两个列表都设置了 group="items"，这意味着它们属于同一个拖动组，因此项目可以在两个列表之间互相拖动。

下面是 group 属性的一些详细配置方法：

基本用法

<draggable :list="list1" group="items">
  <!-- 列表内容 -->
</draggable>

配置对象

group 属性也可以接受一个对象，用于更详细的配置。例如：

<draggable :list="list1" :group="{ name: 'items', pull: 'clone', put: true }">
  <!-- 列表内容 -->
</draggable>

在这个对象中，你可以设置以下属性：

• name：组的名称，必须相同才能互相拖动。
• pull：定义是否可以从这个列表中拖出项目。值可以是：
  • 'clone'：拖动时创建一个克隆。
  • true：允许拖动。
  • false：不允许拖动。
• put：定义是否可以向这个列表中放入项目。值可以是：
  • true：允许放入。
  • false：不允许放入。

示例

假设你有两个列表，一个允许拖出但不允许放入，另一个允许放入但不允许拖出：

<template>
  <div class="drag-container">
    <div>
      <h2>源列表</h2>
      <draggable class="drag-list" :list="sourceList" :group="{ name: 'items', pull: 'clone', put: false }">
        <template #item="{ element }">
          <div class="drag-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>

    <div>
      <h2>目标列表</h2>
      <draggable class="drag-list" :list="targetList" :group="{ name: 'items', pull: false, put: true }">
        <template #item="{ element }">
          <div class="drag-item">{{ element.name }}</div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  setup() {
    const sourceList = ref([
      { name: '源项目 1' },
      { name: '源项目 2' },
      { name: '源项目 3' },
    ]);

    const targetList = ref([]);

    return {
      sourceList,
      targetList,
    };
  },
};
</script>

<style scoped>
.drag-container {
  width: 600px;
  display: flex;
  justify-content: space-around;
}

.drag-list {
  width: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.drag-item {
  padding: 10px;
  margin: 5px 0;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: move;
}
</style>

在这个示例中，源列表 允许拖出项目但不允许放入项目，而 目标列表 允许放入项目但不允许拖出项目。这样，你就可以从源列表中拖动项目到目标列表中，但不能反过来。