vue3+elementPlus穿梭框拖拽

安装

npm install sortablejs --save

<template><div class="transfer" ref="transfer"><div><el-transfer v-model="inputForm" :data="data" :titles="titles"><template #default="{ option }"><div class="pannel-content"><span :draggable="!option.disabled" @dragstart="drag($event, option)">{{ option.label}}</span></div></template></el-transfer><el-button @click="submit">确定</el-button></div></div>
</template><script lang="ts" setup>
import { TransferDataItem } from 'element-plus';
import Sortable from 'sortablejs';
const props = withDefaults(defineProps<{data: TransferDataItem[],titles?: [string, string]
}>(), {data: () => [{key: '111',label: `选项一`,disabled: false,}, {key: '222',label: `选项二`,disabled: false,}, {key: '333',label: `选项三`,disabled: false,}, {key: '444',label: `选项四`,disabled: false,}],titles: () => ['单个拖拽待选', '已选列表']
})
const data = computed(() => props.data)
const titles = computed(() => props.titles)const inputForm = ref([] as any)
const draggingKey = ref(null as any)
const transfer = ref<HTMLDivElement | null>(null)
const drag = (ev: DragEvent, option: any) => {draggingKey.value = option.key
}
onMounted(() => {const leftPanel = transfer?.value?.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0] as any;const rightPanel = transfer?.value?.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0] as any;const leftEl = leftPanel?.getElementsByClassName("el-transfer-panel__list")[0]const rightEl = rightPanel?.getElementsByClassName("el-transfer-panel__list")[0]Sortable.create(rightEl, {onEnd: (evt: any) => {const { oldIndex, newIndex } = evt;const temp = inputForm.value[oldIndex]if (!temp || temp === 'undefined') return;// 解决右边最后一项从右边拖左边，有undefined的问题inputForm.value[oldIndex] = inputForm.value[newIndex]inputForm.value[newIndex] = temp}})Sortable.create(leftEl, {onEnd: (evt: any) => {const { oldIndex, newIndex } = evt;if (oldIndex === newIndex) return;const temp = data.value[oldIndex]if (!temp || (temp as any) === 'undefined') return;// 解决右边最后一项从右边拖左边，有undefined的问题data.value[oldIndex] = data.value[newIndex]data.value[newIndex] = temp}})leftPanel.ondragover = (ev: any) => {ev.preventDefault()}leftPanel.ondrop = (ev: any) => {ev.preventDefault();const index = inputForm.value.indexOf(draggingKey.value)if (index !== -1) {inputForm.value.splice(index, 1)}}rightPanel.ondragover = (ev: any) => {ev.preventDefault()}rightPanel.ondrop = (ev: any) => {ev.preventDefault();if (inputForm.value.indexOf(draggingKey.value) === -1) {inputForm.value.push(draggingKey.value)}}
})
function submit() {console.log(inputForm.value);}
</script>
<style scoped lang="scss">
:deep(.el-transfer__button) {width: 30px;
}
</style>