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