vue3使用draggable组件实现拖拽

最近的项目中需要实现拖拽功能，在此记录一下实现过程以及采坑点

1. 安装vuedraggable

npm install -S vuedraggable@next

2.在vue页面中引入VueDraggableNext

<script lang="ts" setup>
import { VueDraggableNext as draggable } from 'vue-draggable-next'
</script>

代码

<div class="draggable-box">
    <draggable v-model="myArray" @update="onDraggableUpdate"
      :options="{ group: 'images', animation: 200, delayOnTouchOnly: true }">
      <transition-group>
           *行内实现拖拽需设置为行内块元素*
        <div class="item" v-for="element in myArray" :key="element.id">
          <img :src="element.url" />
          <span> {{ element.name }}--{{ element.index }}</span>
        </div>
      </transition-group>
    </draggable>
  </div>

const onDraggableUpdate = () => {
  myArray.value.forEach((v, index) => {
    v.index = index;
  })

效果

拖拽前 拖拽后

为什么不使用vuedraggable组件--报错

参考 blog.csdn.net/weixin_4397…