npm install vue-flexable-dnd

VUE3: [src/main.js]
import { createApp } from 'vue'
import App from './App.vue'
import VDContainer from 'vue-flexable-dnd'

createApp(App).use(VDContainer).mount('#app')
// after that, you can use <VDContainer> anywhere in proejct

import VDComponent from 'vue-flexable-dnd';

export default{
    components:{
        VDComponent
    }
}

···
<VDContainer
    :width=350          //「Number」 outer container's width
    :animation=true    //「Boolean」 show animation or not while change the position of the target
    :data=data          //「Array【object】」 original data
    type="sort"         //「string」 sort | switch, 「sort」default, typeof sort mode
    @getData=funcName   //「function」 Callback function，Callback function to receive   array after modified
>
    <template v-slot:VDC="{data, index}">
        <div>
            <!-- edit your own components here -->
            {{data.objectParameter1}}
            {{data.objectParamerter2}}
        </div>
    </template>
</VDContainer>
···

// options style[选项式]:
export default {
    data() {
        return {
            data: [
                {
                    objectParameter1: 'anyThing',
                    objectParamerter2: 'anyThing2'
                },{
                    objectParameter1: 'anyThing3',
                    objectParamerter2: 'anyThing4'
                },

            ]
        }
    }
}
// Composition style[组合式]:
<script setup>
    const data = reactive([
                {
                    objectParameter1: 'anyThing',
                    objectParamerter2: 'anyThing2'
                },{
                    objectParameter1: 'anyThing3',
                    objectParamerter2: 'anyThing4'
                },

            ])
</script>