关于vue.js:vue-element-eltransfer增加拖拽功能

芯资管我的项目要求 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>