vue 拖拽

// Vue 拖拽示例代码

<template>
  <div id="app">
    <draggable v-model="items" @end="onEnd">
      <transition-group>
        <div v-for="element in items" :key="element.id" class="item">{{ element.name }}</div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'App',
  components: {
    draggable,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
      ],
    };
  },
  methods: {
    onEnd(event) {
      console.log('拖拽结束', event);
    },
  },
};
</script>

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

解释说明：

1. 依赖库：使用了 vuedraggable 库来实现拖拽功能。你可以通过 npm 安装它：npm install vuedraggable。
2. 模板部分：
   • 使用 <draggable> 标签包裹需要拖拽的元素列表。
   • v-model="items" 绑定到数据中的 items 数组，确保拖拽后的顺序能够反映在数据中。
   • @end="onEnd" 监听拖拽结束事件，并调用 onEnd 方法。
   • transition-group 用于处理动画效果，使拖拽时有更流畅的视觉体验。
3. 脚本部分：
   • 引入 draggable 组件并注册。
   • 定义 items 数据数组，包含一些示例项目。
   • onEnd 方法在拖拽结束时触发，可以在这里处理拖拽完成后的逻辑。
4. 样式部分：
   • 为每个可拖拽的项设置了基本样式，包括内边距、边框和鼠标指针样式。

希望这段代码和解释对你有帮助！