vue 原型设计 拖拽_Vue案例之拖拽

好的，关于 Vue 原型设计的拖拽实现，可以使用 Vue 官方推荐的拖拽库 vue-draggable。

安装 vue-draggable：

npm install vuedraggable

使用 vue-draggable：

<template>
  <div>
    <draggable v-model="list">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

上面的代码中，使用了 v-model 绑定了拖拽后的列表数据，使用 v-for 渲染列表。可以通过配置 draggable 的属性来实现更多的拖拽效果。

希望能帮助到你！