el-transfer增加拖拽功能

el-transfer增加拖拽排序，左右互相拖拽功能：

 

npm i sortablejs

 

<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>

<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]
                    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]
                    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>