vue element el-transfer增加拖拽功能

芯资管项目要求el-transfer增加拖拽排序，左右上下互相拖拽功能；
原来的组件不支持拖拽，这里要用个第三方脱宅组件sortablejs

首先安装

    sudo npm i sortablejs --save-dev

html代码

    <template>
    <el-transfer ref="transfer" id="transfer" v-model="value" :data="data">
      <span slot-scope="{ option }" :draggable="!option.disabled" @dragstart="drag($event,option)">{{ option.key }} - {{ option.label }}</span>
    </el-transfer>
</template>```

create

    <script>

      import Sortable from 'sortablejs'

     export default {
            data() {
                const generateData = _ => {
                    const data = []; for (let i = 1; i <= 15; i++) {
                        data.push({
                            key: i,
                            label: `备选项 ${i}`,
                            disabled: i % 4 === 0 });
                    } return data;
                }; return {
                    data: generateData(),
                    value: [1, 4],
                    draggingKey : null }
            },
            mounted() {
                const transfer = this.$refs.transfer.$el
                const leftPanel = transfer.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0];
                const rightPanel = transfer.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0];
                const rightEl = rightPanel.getElementsByClassName("el-transfer-panel__list")[0]
                Sortable.create(rightEl,{
                    onEnd: (evt) => {
                        const {oldIndex,newIndex} = evt;
                        const temp = this.value[oldIndex]  
                        if (!temp || temp === 'undefined') {
                           return
                        }// 解决右边最后一项从右边拖左边，有undefined的问题
                        this.$set(this.value,oldIndex,this.value[newIndex])   
                        this.$set(this.value,newIndex,temp)
                    }
                })
                const leftEl = leftPanel.getElementsByClassName("el-transfer-panel__list")[0]
                Sortable.create(leftEl,{
                    onEnd: (evt) => {
                        const {oldIndex,newIndex} = evt;
                        const temp = this.data[oldIndex] 
                        if (!temp || temp === 'undefined') {
                           return
                        } // 解决右边最后一项从右边拖左边，有undefined的问题
                        this.$set(this.data,oldIndex,this.data[newIndex]) 
                        this.$set(this.data,newIndex,temp)
                    }
                })
                leftPanel.ondragover = (ev) => {
                    ev.preventDefault()
                }
                leftPanel.ondrop = (ev) => {
                    ev.preventDefault();
                    const index = this.value.indexOf(this.draggingKey) if(index !== -1){ this.value.splice(index,1)
                    }
                }
                rightPanel.ondragover = (ev) => {
                    ev.preventDefault()
                }
                rightPanel.ondrop = (ev) => {
                    ev.preventDefault();    if(this.value.indexOf(this.draggingKey) === -1){ this.value.push(this.draggingKey)
                    }
                }
            },
            methods: {
                drag(ev,option) { this.draggingKey = option.key
                }
            }

        } </script>