The element el-transfer component realizes the draggable effect of the list on the right

The requirement is to implement the data list selected in the Transfer shuttle box, which can be sorted by dragging and dropping.

---

Mainly use the sortablejs plugin.

First install sortablejs

npm install sortablejs --save

Refer to the plugin in the re-used vue file

<el-transfer 
    ref="transfer" 
    v-model="form" :data="groupModalList"
    :titles="['未选', '已选']"
    @change="transferList"
    target-order="push"
>
</el-transfer>


import Sortable from 'sortablejs'

data () {
    return {
        form: [],
        groupModalList: []
    }
}

methods: {
   transferList (e) {
      this.$forceUpdate() 
   } 
}

mounted() {
    this.$nextTick(() => {
        const transfer = this.$refs.transfer.$el
        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
            console.log(oldIndex, newIndex)
            let _arr = this.form.splice(oldIndex, 1)
            this.form.splice(newIndex, 0, _arr[0])
            console.log(this.form)
          }
        })
      })
}

• $forceUpdate in transferList is to force update list data.
• It is recommended that target-order="push" be set to push mode, so that the item selected on the left will be appended to the end of the right for easy viewing.
• The above this.$nextTick method can be written in mounted. Of course, if you want to put the shuttle box in the pop-up layer, then don’t write it in mounted. It is recommended to write it in the method that triggers the opening of the pop-up layer (that is, the pop-up layer visible = true in the method).