Vue 2 + JavaScript + vuedraggable 集成案例

1. 安装依赖

首先，确保你的项目中已经安装了 vuedraggable。如果还没有安装，可以通过以下命令进行安装：

npm install vuedraggable

2. 引入 vuedraggable

在你的 Vue 组件中引入 vuedraggable：

<template>
  <div>
    <draggable v-model="items" @end="onEnd">
      <div v-for="(item, index) in items" :key="index" class="item">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      items: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' },
      ],
    };
  },
  methods: {
    onEnd(event) {
      console.log('Drag ended', event);
    },
  },
};
</script>

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

3. 解释代码

• 模板部分：

  • 使用 <draggable> 组件包裹可拖动的元素。
  • v-model 绑定到 items 数组，这样可以实现双向数据绑定。
  • @end 事件在拖动结束时触发，调用 onEnd 方法。

• 脚本部分：

  • 引入 vuedraggable 并注册为组件。
  • data 中定义 items 数组，包含一些示例数据。
  • methods 中定义 onEnd 方法，用于处理拖动结束后的逻辑。

• 样式部分：

  • 为每个可拖动的项添加一些基本样式，使其更易于识别和操作。

4. 运行项目

确保你的项目配置正确，然后运行项目：

npm run serve

打开浏览器，访问你的 Vue 应用，你应该能够看到一个可拖动的列表，并且可以在控制台中看到拖动结束时的日志输出。

5. 扩展功能

• 分组拖动：可以通过 group 属性实现多个 draggable 组件之间的拖动。
• 排序限制：通过 sort 属性控制是否允许排序。
• 动画效果：通过 move-class 和 ghost-class 等属性添加拖动时的动画效果。

希望这个示例能帮助你快速上手 vuedraggable！如果有任何问题或需要进一步的帮助，请随时提问。