Vue3 第二十四篇：集成vue.draggable

1.官网教程和示例GitHub - SortableJS/vue.draggable.next: Vue 3 compatible drag-and-drop component based on Sortable.jshttps://github.com/SortableJS/vue.draggable.next

vuedraggablehttps://sortablejs.github.io/vue.draggable.next/#/transition-example

2. 安装（注意注意：不能少了@next，否则就安装成了个Vue2的版本，会报错找不到header）

yarn add vuedraggable@next

或者

npm i -S vuedraggable@next

3.使用：Vue组件形式

<script setup>
import draggable from "vuedraggable";
import { ref, reactive } from 'vue'
 
let list = reactive([
    { name: "AJohn", id: 0 },
    { name: "BJoao", id: 1 },
    { name: "CJean", id: 2 }
])
let dragging = false
 
</script>
 
<template>
    <draggable :list="list" item-key="name" @start="dragging = true" @end="dragging = false">
 
        <template #item="{ element }">
            <span>
                {{ element.name }}
            </span>
        </template>
 
    </draggable>
</template>
 
 
<style scoped>
</style>

4.使用：jsx组件形式：回调函数中使用到了this，但是jsx中没有this，还没有找到好的解决办法。