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 应用中实现一个简单的拖动列表了！