vue3中使用拖拽组件vuedragable@next

vue3中使用拖拽组件vuedragable@next

官网传送门

• 下载

  npm install vuedraggable@next
  

• 基本使用

  <script setup>
  import draggable from 'vuedraggable'
  import { ref } from 'vue'
  const list = ref([{ id:1,name:'第一个' },{ id:2,name:'第二个' },{ id:3,name:'第三个' },
  ])
  </script><template><div class="dragbox"><draggable v-model="list" item-key="id"><template #item="{element}" ><div>{{element.name}}</div></template></draggable></div>
  </template>

• 从一个盒子拖入到另一个盒子

  <script setup>
  import draggable from 'vuedraggable'
  import { ref } from 'vue'const sourceList = ref([{ id:1,name:'第一个' },{ id:2,name:'第二个' },{ id:3,name:'第三个' },
  ]) // 源const targetList = ref([])  // 目标
  </script><template><div class="dragbox"><draggable v-model="sourceList" item-key="id":group="{ name: 'items', pull: 'clone', put: false }" :sort="false"><template #item="{element}"  ><div>{{ element.name }}</div></template></draggable></div><br /><div class="dragbox"><draggable v-model="targetList" item-key="id":group="{ name: 'items', pull: false, put: true }" ><template #item="{element}" ><div>{{ element.name }}</div></template></draggable></div>
  </template>
  

• 说明：

• group属性的配置，name：相同的name间可以互相拖动，pull：true 允许往外拖拽，put：true 允许放入

• sort属性 false则表示在当前盒子内部禁止拖拽