js实现拖拽排序

news2024/11/16 21:37:28

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>拖拽排序</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			ul {
				margin: 20px auto;
				width: 200px;
				list-style-type: none;
			}

			li {
				margin: 5px;
				text-align: center;
				width: 200px;
				height: 30px;
				background: skyblue;
			}

			.list .moving {
				background: transparent;
				color: transparent;
				border: 1px dashed #ccc;
			}
		</style>
	</head>
	<body>
		可拖动排序，改变数组，
		<div id="Application">

			<ul class="list" v-model="checkList">
				<li draggable="true" value="1">1</li>
				<li draggable="true" value="2">2</li>
				<li draggable="true" value="3">3</li>
				<li draggable="true" value="4">4</li>
				<li draggable="true" value="5">5</li>
			</ul>
			<ul>
				您的数据排序是：<h2 id="view"></h2>
			</ul>

		</div>
	</body>
</html>
<script type="text/javascript">
	const forli = () => {
		var arr = document.getElementsByTagName('li');
		var	temp = [];
		for (var i = 0; i < arr.length; i++) {
			temp.push(arr[i].innerHTML)
			div = document.getElementById("view");
			div.innerHTML = JSON.stringify(temp);
		}
	}
	forli(); //先执行一遍
	let list = document.querySelector('.list')
	let currentLi // 记录拖拽元素
	list.addEventListener('dragstart', (e) => {
		e.dataTransfer.effectAllowed = 'move' // 拖动样式改为 "move"
		currentLi = e.target
		//异步
		setTimeout(() => {
			currentLi.classList.add('moving')
		})
	})

	list.addEventListener('dragenter', (e) => {
		e.preventDefault() // 阻止默认事件
		if (e.target === currentLi || e.target === list) { // 当移动到当前拖动元素，或者父元素上面我们不做操作
			return
		}
		let liArray = Array.from(list.childNodes)
		let currentIndex = liArray.indexOf(currentLi) // 获取到拖动元素的下标
		let targetindex = liArray.indexOf(e.target) // 获取到目标元素的下标
		if (currentIndex < targetindex) {
			list.insertBefore(currentLi, e.target.nextElementSibling)
		} else {
			list.insertBefore(currentLi, e.target)
		}
	})

	list.addEventListener('dragover', (e) => {
		e.preventDefault();
		forli();
	})
	list.addEventListener('dragend', (e) => {
		currentLi.classList.remove('moving')
	})
</script>