Vue3实现优雅拖拽排序全攻略

一、安装sortablejs

npm install sortablejs

二、全局注册sortablejs

import Sortable from "sortablejs";
window.$Sortable = Sortable;

三、页面内要拖拽的html内容

<div class="formBox">
		<div class="bannerJson formBody" style="cursor: move">
			<div v-for="(item, index) in form" :key="index">
			</div>
		</div>
</div>

四 、页面内JS方法

onMounted(() => {
		rowDrag();
});
const rowDrag = () => {
	let sortableInstance = null;
	const tbody = document.querySelector(".formBox .formBody");
	// 销毁现有Sortable实例（如果存在）
	if (sortableInstance) {
		sortableInstance.destroy();
	}
	// 使用更新后的isSort值创建新的Sortable实例
	sortableInstance = new $Sortable(tbody, {
		filter: "input,textarea",
		preventOnFilter: false,//禁止输入框触发拖拽操作
		// 是否禁用拖拽排序
		disabled: false,
		// ms, number 单位：ms，定义排序动画的时间
		animation: 150,
		// 设置拖拽样式类名
		dragClass: "drop-dragClass",
		// 设置拖拽停靠样式类名
		ghostClass: "drop-ghostClass",
		// 设置选中样式类名
		chosenClass: "drop-chosenClass",
		// 关键代码
		onEnd(evt) {
			// 结束拖拽
			console.log("结束表格拖拽", `拖动前索引${evt.oldIndex}---拖动后索引${evt.newIndex}`);
			let oldIndex = evt.oldIndex;
			let newIndex = evt.newIndex;
			if (oldIndex != newIndex) {
				let form_news = JSON.parse(JSON.stringify(props.form));
				let temp = form_news[oldIndex];
				if (oldIndex < newIndex) {
					//向下移动调整顺序
					for (let i = oldIndex; i < newIndex; i++) {
						form_news[i] = form_news[i + 1];
					}
				} else if (oldIndex > newIndex) {
					//向上移动时调整顺序
					for (let i = oldIndex; i > newIndex; i--) {
						form_news[i] = form_news[i - 1];
					}
				}
				form_news[newIndex] = temp;
				props.form = [];
				nextTick(() => {
					props.form= JSON.parse(JSON.stringify(form_news));
					console.log(props.form, "form");
					update();//调用更新数据
				});
			}
		}
	});
};

五 、页面css样式优化

.drop-dragClass {
	background: rgba(0, 105, 255, 0.3) !important;
	border-radius: 10px;
}
.drop-ghostClass {
	background: rgba(0, 105, 255, 0.8) !important;
	border-radius: 10px;
}
.drop-chosenClass:hover > div {
	background: rgba(0, 105, 255, 0.3) !important;
	border-radius: 10px;
}
:deep(.el-link__inner) {
	color: #0069ff;
}
#formBodyBox > div {
	cursor: grab;
	transition: all 0.3s ease; /* 添加过渡动画 */
}
/* 鼠标悬停效果 */
#formBodyBox > div:hover {
	background: #f1f3f5;
	transform: translateX(5px);
}
/* 拖拽过程中的样式 */
#formBodyBox > div.sortable-drag {
	opacity: 0.5;
	transform: scale(0.98);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* 占位符样式（拖拽时的插入位置指示） */
.sortable-placeholder {
	background: #e9ecef;
	border: 2px dashed #adb5bd;
	border-radius: 6px;
	margin: 8px 0;
	height: 42px; /* 与拖拽项高度一致 */
}
.sortable-ghost {
	opacity: 0.7;
	transform: rotate(3deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.sortable-chosen {
	background: #fff3bf !important;
	border-color: #ffd43b !important;
}
#formBodyBox {
	background: #f8f9fa;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: background 0.3s;
	border-radius: 4px;
}
/* 拖拽时容器高亮 */
#formBodyBox .sortable-active {
	background: #f1f3f5;
}