本篇文章为大家展示了怎么在vue中使用el-transfer实现一个拖拽功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
首先安装
计算
安全
数据库
网络和加速
企业服务
sudo npm i sortablejs --save-devhtml代码
<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实现一个拖拽功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
