vue el-transfer新增拖拽排序功能---sortablejs插件
<template>
<!-- target-order="unshift"必须设置,如果不设置的话后台穿的value值得顺序会被data重置 - -->
<el-transfer ref="transfer" id="transfer" v-model="value" target-order="unshift" :data="datas" filterable :filter-method="menuFilterMethod" filter-placeholder="Please enter button" :titles="['Select', 'Selected']" @change="onChange">
<span slot-scope="{ option }" class="item" @dragstart="drag($event,option)">{{ option.label }}</span>
</el-transfer>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: 'Transfer',
props: {
model: {
type: Array,
default: () => {
return []
}
},
data: {
type: Array,
default: () => {
return []
}
}
},
data() {
return {
datas: this.data,
value: [],
draggingKey: '',
menuFilterMethod(query, item) {
// return item.menuListdata.indexOf(query) > -1
const regStr = query.replace(/\*/g, '.*')
const reg = new RegExp(regStr)
return reg.test(item.label)
}
}
},
watch: {
// 监听 弹窗显示， 可以用来写 编辑时的请求接口
model: function(newVal, oldVal) {
if (newVal) {
this.value = newVal
}
}
},
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, {
animation: 100,
onEnd: (evt) => {
const { oldIndex, newIndex } = evt
const temp = this.value[oldIndex]
if (!temp || temp === 'undefined') {
return
}// 解决右边最后一项从右边拖左边，有undefined的问题
//这里和网上的有点不一样,网上搜到的结果排序是,当前拖拽的元素和拖拽位置的元素互换位置,但是实际上在使用el-transfer有两个问题
//1.右侧排序value的数组顺序来源于后台穿的数组顺序,实际如果不设置target-order="unshift"的话,展示会按照左侧的数据列顺序展示,导致拖拽排序时顺序乱七八糟
//2.实际拖拽排序看到的效果是当前拖拽元素拖拽到其他地方,其他地方的元素会下移,而不是调换顺序
// 去除空字符串
for (var i = 0; i < this.value.length; i++) {
if (this.value[i] === '' || this.value[i] === null || typeof (this.value[i]) === 'undefined') {
this.value.splice(i, 1)
i = i - 1
}
}
const arr_temp = [].concat(this.value) // 创建一个新的临时数组，用以操作后不变更原数组
console.log(this.value)
arr_temp.splice(newIndex, 0, arr_temp.splice(oldIndex, 1)[0]) // 在b位置插入从a位置截取的元素
this.value = arr_temp
console.log(this.value)
this.$emit('update:call-back', this.value)
}
})
const leftEl = leftPanel.getElementsByClassName('el-transfer-panel__list')[0]
Sortable.create(leftEl, {
animation: 100,
onEnd: (evt) => {
const { oldIndex, newIndex } = evt
const temp = this.datas[oldIndex]
this.$set(this.datas, oldIndex, this.datas[newIndex])
this.$set(this.datas, 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
},
onChange(value, direction, movedKeys) {
// console.log(value, direction, movedKeys)
this.$emit('update:call-back', value)
}
}
}
</script>
