说明

演示网站: https://sortablejs.github.io/Vue.Draggable/#/simple

用法

1、安装

npm i -S vuedraggable@next

2、引入

需要使用的页面引入

<template>
  <draggable 
    v-model="myArray" 
    group="aaa" 
    item-key="id">
    <template #item="{element}">
      <div>{{element.name}}</div>
     </template>
  </draggable>
</template>
<script lang='ts'>
export default {
  inheritAttrs: false,
  name: 'yourName'
}
</script>
<script setup lang='ts'>
import draggable from 'vuedraggable'
import { ref } from "vue"
const myArray = [
  {name:"A1"},
  {name:"A2"},
]
</script>
<style lang='less'>
</style>

插槽 slot

item

<draggable v-model="myArray" item-key="id">
  <template #item="{element, index}">
    <div> {{index}} - {{element.name}} </div>
  </template>
</draggable>