怎么在vue中使用el-transfer实现一个拖拽功能

本篇文章为大家展示了怎么在vue中使用el-transfer实现一个拖拽功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

首先安装

 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>

上述内容就是怎么在vue中使用el-transfer实现一个拖拽功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。