vue 拖动切换位置

<script src="js/vue.js"></script>
<script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
<script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>

<div class="whole">
    <draggable v-model="array" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @start="onStart" @end="onEnd">
        <transition-group>
            <div class="box" v-for="(item,index) in array" :key="index" >
                <span>{{item}}</span>
            </div>
        </transition-group>
    </draggable>
</div>
<style type="text/css">
    *{margin: 0;border:0;padding: 0;}
    ul,li{list-style: none;}
    .whole{width: 1000px;height: 580px;margin: 100px auto;display: flex;flex-direction: row;align-items: flex-start;justify-content: center;background: #f1f1f1;}
    .whole>div{height: 520px;overflow-x: hidden;overflow-y: scroll;padding:20px 0;}
    .whole>div::-webkit-scrollbar{display: none;}
    .box{width: 300px;height: 40px;background: #CCCCCC;font-size: 22px;color: #333;display: flex;flex-direction: row;align-items: center;justify-content: center;}
    .box+.box{margin-top: 20px;}
    .box span{margin: 0 10px;}
        
</style>
<script>
    window.onload=function(){
        // 全局注册组件
        Vue.component('vuedraggable', window.vuedraggable)
        var app=new Vue({
            el: '.whole',
            components: {
                vuedraggable: window.vuedraggable,//当前页面注册组件
            },
            data:{
                array:['张三','李四','王朝','马汉','汤姆','杰瑞','小明','小红','小铃铛','阿巳','锦鲤','琥珀']
            },
            created (){
            },
            methods:{
            }
        })
            
    }
</script>

预览