vue+sortablejs进行列表排序

别人再好是别人的，自己好才是自己的

第一步：安装
···
npm install sortablejs --save-dev
···
第二步：使用

<template>
        <ul ref="list" class="list" id="list">
            <li v-for="(item,index) in items" :key="index">
               <div>{{item.name}}</div>
            </li>
        </ul>
</template>
<script>
    import Sortable from 'sortablejs'
    export default {
        data() {
            return {
                items: [{
                    id:1,
                    name: '李大玄',
                }, {
                    id:2,
                    name: '李大玄1',
                },],
                obj: undefined,
            }
        },
        mounted () {
            var _this = this;
            var $ul = this.$refs.list
            this.$nextTick(() => {
                _this.asd($ul)
            })
        },
        methods:{
            btnUp(index){
                var item = this.items[index];
                this.items.splice(index,1);
                this.items.unshift(item);
            },
            asd($ul) {
                var _this = this;
                this.obj = new Sortable($ul, {
                    handle: '.lkhzbdj',
                    onUpdate:function(event){
                            var newIndex = event.newIndex,
                                oldIndex = event.oldIndex,
                                $li = $ul.children[newIndex],
                                $oldLi = $ul.children[oldIndex];
                                
                            $ul.removeChild($li)    
                            if(newIndex > oldIndex) {
                                $ul.insertBefore($li,$oldLi)
                            } else {
                                $ul.insertBefore($li,$oldLi.nextSibling)
                            }
                            var item = _this.items.splice(oldIndex,1)
                            _this.items.splice(newIndex,0,item[0])
                            this.obj = null;
                    },
                    animation: 150,
                })

            }
        }
    }
</script>
<style scoped>
li {
    display: flex;
    background-color: pink;
    margin-bottom: 10px;
}
</style>