2025-08-06 vue3+vuedraggable": "^4.1.0"实现拖拽

如有用吱一声哦~~~ 安装组件

# npm管理器
npm install vuedraggable
 
# yarn管理器
yarn add vuedraggable

vue 文件引入

<template>
	<div class="app-container">
		<div>
			<!-- 源容器 -->
			<draggable class="flex" :list="list" item-key="id" animation='150'
				:group="{ name: 'drag-group', pull: 'clone' }" :sort="false" :forceFallback="true" :filter="'.noMove'"
				@end="handleDragEnd">
				<template #item="{ element }">
					<div class="list" :class="element.isIn ? 'noMove' : 'move'"> {{ element.modelName }} </div>
				</template>
			</draggable>
		</div>
		<!-- 目标容器 -->
		<draggable class="dispose" v-model="listUse" :group="{ name: 'drag-group', pull: '' }" :disabled="false"
			:sort="false">
			<template #item="{ element }" :filter="'.list'">
				<div class="list">{{ element.modelName }}</div>
			</template>
		</draggable>
	</div>
</template>

<script setup name="process">
import draggable from "vuedraggable";![GIF 2025-8-6 15-26-06.gif](https://upload-images.jianshu.io/upload_images/14506144-891b0edf92c104fc.gif?imageMogr2/auto-orient/strip)

const loading = ref(true)
const state = reactive({
	// 全部的数据
	list: [],
	// 拖拽过来的数据
	listUse: [],
})
const { list, listUse } = toRefs(state)
const handleDragEnd = (evt) => {
	if (evt.to !== evt.from) { // 跨容器拖拽
		const draggedItem = evt.item._underlying_vm_; // 获取拖拽的元素
		draggedItem.isIn = true; // 标记为已选中
	}
};
async function nowSelectSchoolModuleList() {
	// let res = await 获取初始的数据请求()
	let res = [
		{
			"id": 1,
			"modelName": "列表1",
		},
	]
	listUse.value = res
	return res
}
/** 查询角色列表 */
async function getList() {
	loading.value = true
	let res = await nowSelectSchoolModuleList()
	// let response = await 全部数据请求()
	let data = [
		{
			"id": 1,
			"modelName": "列表1",
		},
		{
			"id": 2,
			"modelName": "列表2",
		},
		{
			"id": 3,
			"modelName": "列表1",
		},
	]
	data.map(item => {
		if (res.filter(nowItem => nowItem.id === item.id).length > 0) {
			item.isIn = true
		} else {
			item.isIn = false
		}
	})
	list.value = data
	loading.value = false
}
onMounted(() => {
	getList()
});

</script>
<style lang="scss" scoped>
.app-container {
	width: 100%;
	height: 100%;
	padding: 20px;
}

.flex {
	display: flex;
	justify-content: flex-start;
}

.list {
	width: 245px;
	height: 86px;
	background: #FAFAFA;
	border-radius: 16px 16px 16px 16px;
	border: 1px solid #E9E9E9;
	padding: 9px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.noMove {
	background: rgba(206, 226, 255, 0.75);
}

.dispose {
	width: 1560px;
	height: 376px;
	background: #F6F6F6;
	border-radius: 16px 16px 16px 16px;
	border: 2px solid #AEAEAE;
	padding: 30px;
	margin-top: 13px;
}
</style>

效果图如下：