Draggable 拖拽例項

小珍珠在河里敲代码發表於2024-04-09
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>課程表拖拽</title>
		<style type="text/css">
			h1 {
				text-align: center;
			}

			.container {
				display: flex;
			}

			.left {
				background: #eee;
				height: 550px;
				width: 100px;
			}
			.left div{
				margin: 10px;
			}

			.item {
				text-align: center;
				color: white;
				cursor: pointer;
				width: 80px;
				height: 30px;
				line-height: 30px;
			}

			.right {
				background: #eee;
				width: calc(100% - 100px);
				margin-left: 20px;
				padding: 10px;
			}

			.color1 {
				background: #BA55D3;
			}

			.color2 {
				background: #BC8F8F;
			}

			.color3 {
				background: #B8860B;
			}

			.color4 {
				background: #B22222;
			}

			.color5 {
				background: #B0E0E6;
			}

			.color6 {
				background: #ADFF2F;
			}

			.color7 {
				background: #9932CC;
			}

			.color8 {
				background: #DB7093;
			}

			.color9 {
				background: #87CEFA;
			}
			
			.color10 {
				background: #32CD32;
			}
			
			.color11 {
				background: #0000CD;
			}

			table {
				text-align: center;
				border-collapse: collapse;
				margin: 0 auto;
				border: 1px solid #696969;
			}

			table tr th {
				border: 1px solid #696969;
				padding: 15px;
				background: #DCDCDC;
				font-weight: bold;
				color: #000;
			}

			table td {
				border: 1px solid #696969;
				width: 100px;
				height: 50px;
			}

			.ths {
				border-top: 1px solid #eee;
				border-left: 1px solid #eee;
				background: none;
			}

			.drop-over {
				background: #696969;
			}
		</style>
	</head>
	<body>
		<h1>課程表拖拽</h1>
		<div class="container">
			<div class="left" data-drop="move">
				<div draggable="true" data-effect="copy" class="color1 item">語文</div>
				<div draggable="true" data-effect="copy" class="color2 item">數學</div>
				<div draggable="true" data-effect="copy" class="color3 item">英語</div>
				<div draggable="true" data-effect="copy" class="color4 item">物理</div>
				<div draggable="true" data-effect="copy" class="color5 item">化學</div>
				<div draggable="true" data-effect="copy" class="color6 item">生物</div>
				<div draggable="true" data-effect="copy" class="color7 item">政治</div>
				<div draggable="true" data-effect="copy" class="color8 item">歷史</div>
				<div draggable="true" data-effect="copy" class="color9 item">地理</div>
				<div draggable="true" data-effect="copy" class="color10 item">音樂</div>
				<div draggable="true" data-effect="copy" class="color11 item">體育</div>
			</div>
			<div class="right">
				<table border="1">
					<tr>
						<th class="ths"></th>
						<th>星期一</th>
						<th>星期二</th>
						<th>星期三</th>
						<th>星期四</th>
						<th>星期五</th>
						<th>星期六</th>
						<th>星期日</th>
					</tr>
					<tr  align="center" valign="middle">
						<td rowspan="4" style="background: #DCDCDC;">
							上
							<br>
							<br>
							午
						</td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td style="border-left: 1px solid #eee;border-right: 1px solid #eee;" colspan="8">
							午休
						</td>
					</tr>
					<tr  align="center" valign="middle">
						<td rowspan="4" style="background: #DCDCDC;">
							下
							<br>
							<br>
							午
						</td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
					<tr  align="center" valign="middle">
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
						<td data-drop="copy"></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script src="js/project.js"></script>
</html>


const container = document.querySelector(".container");

let source;
container.ondragstart = (e) => {
	e.dataTransfer.effectAllowed = e.target.dataset.effect;
	source = e.target;
}

function clearStyles() {
	document.querySelectorAll('.drop-over').forEach((node) => {
		node.classList.remove('drop-over');
	})
}

function getDropNode(node) {
	while (node) {
		if (node.dataset && node.dataset.drop) {
			return node;
		}
		node = node.parentNode;
	}
}


container.ondragover = (e) => {
	e.preventDefault();
	// console.log("over",e.target);
}

container.ondragenter = (e) => {
	clearStyles();
	const dropNode = getDropNode(e.target);
	if (!dropNode) {
		return;
	}
	if (source.dataset.effect === dropNode.dataset.drop) {
		dropNode.classList.add("drop-over");
	}
}

container.ondrop = (e) => {
	// console.log("drop",e.target);
	const dropNode = getDropNode(e.target);
	if (!dropNode) {
		return;
	}
	if (source.dataset.effect !== dropNode.dataset.drop) {
		return;
	}
	clearStyles();
	if (dropNode.dataset.drop === 'copy') {
		const cloned = source.cloneNode(true);
		cloned.dataset.effect = 'move';
		dropNode.innerHTML = '';
		dropNode.appendChild(cloned);
	} else {
		source.remove();
	}
}

　　

相關文章