Vue中使用elementui与Sortable.js实现列表拖动排序

cnpm install sortablejs --save

<script>
    import Sortable from 'sortablejs'
    export default{
        .........
        data() {
            return {
                accessoryList : [1,2,3,4,5,6,7,8,9]
            }
        }
        .........
    }
</script>

mounted() {
  //sortAble为要拖动的盒子dom
  Sortable.create(document.getElementById('sortAble'), {animation: 150})
 }

<div id="sortAble">
    <p v-for="(item, index) in accessoryList " :key="'' + index">{{item}}</p>
</div>

rowDrop() {
   let that = this
    // eslint-disable-next-line no-unused-vars
    let sortable = new Sortable(document.getElementById('sortAble'), {
        sort: true,
        animation: 150,
        onEnd: function (evt) {
            that.accessoryList.splice(evt.newIndex, 0, that.accessoryList.splice(evt.oldIndex, 1)[0])
            let newArray = that.accessoryList.slice(0)
            that.accessoryList = []
            that.$nextTick(function () {
                that.accessoryList = newArray
            })
        }
    })
}

<template>
    <el-dialog
            v-if="fileManage"
            custom-class="oaDialog"
            :visible.sync="fileManage"
            append-to-body
            width="100%">
        </div>
        <div id="sortAble">
            <p v-for="(item, index) in accessoryList " :key="'' + index">{{item}}</p>
        </div>
    </el-dialog>
</template>

<script>
    import Sortable from 'sortablejs'
    export default {
        name: 'FileManage',
        data() {
            return {
                fileManage: false,
                accessoryList : [1,2,3,4,5,6,7,8,9]
            }
        },
        methods: {
            init () {
                this.fileManage = true
                this.$nextTick(() => {
                    // Sortable.create(document.getElementById('sortAble'), {animation: 150})
                    this.rowDrop()
                })
            },
            rowDrop() {
                let that = this
                // eslint-disable-next-line no-unused-vars
                let sortable = new Sortable(document.getElementById('sortAble'), {
                    sort: true,
                    animation: 150,
                    onEnd: function (evt) {
                        that.accessoryList.splice(evt.newIndex, 0, that.accessoryList.splice(evt.oldIndex, 1)[0])
                        let newArray = that.accessoryList.slice(0)
                        that.accessoryList = []
                        that.$nextTick(function () {
                            that.accessoryList = newArray
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

<template>
    <FileManage ref="FileManage"></FileManage>
</template>

<script>
import FileManage from './FileManage'
export default {
        .....
    methods: {
          open() {
                this.$refs.FileManage.init()
            }
    }
}
</script>