基于Web API drap事件的简单拖拽功能

miao_zz

已于 2023-07-19 20:38:47 修改

阅读量996

点赞数

分类专栏： WebAPI 文章标签：前端 javascript css

于 2023-07-19 20:05:36 首次发布

本文链接：https://blog.csdn.net/qq_37117408/article/details/131816891

版权

WebAPI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文章展示了如何使用HTML、CSS和JavaScript实现基于WebAPI的拖拽功能。通过拖放事件（dragstart,dragenter,dragover,drop,dragleave,dragend）以及数据传输对象DataTransfer，创建了一个可拖动的标签系统，允许用户将标签从头部区域拖放到内容列表中，实现元素的复制操作。

摘要由CSDN通过智能技术生成

基于Web API drap事件的简单拖拽功能

- 效果示例图
- 代码示例

效果示例图

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			ul,
			ol,
			li {
				list-style: none;
			}

			.drag-wrap {
				width: 600px;
				margin: 20px auto;
			}

			.drag-header {
				border: 1px solid #dcdcdc;
				border-radius: 4px;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
			}

			.drag-tab {
				border: 1px solid #00a2ef;
				border-radius: 4px;
				padding: 6px 12px;
				font-size: 16px;
				color: #00a2ef;
				margin: 6px 6px;
				cursor: move;
			}

			.drag-tab:hover {
				border: 1px solid #00a2ef;
				background-color: #00a2ef;
				color: #fff;
			}

			.drag-content {
				border: 1px solid #dcdcdc;
				width: 100%;
				margin-top: 60px;
			}

			.drag-title {
				border-bottom: 1px solid #00a2ef;
				width: 100%;
				display: flex;
				flex-direction: row;
			}

			.drag-th {
				border-right: 1px solid #dcdcdc;
				flex: 1;
				padding: 6px 6px;
			}

			.drag-th:last-child {
				border-right: 0px;
			}

			.drag-tr {
				border-bottom: 1px solid #00a2ef;
				width: 100%;
				display: flex;
				flex-direction: row;
			}

			.drag-tr:hover {
				background-color: #eee;
			}

			.drag-tr:last-child {
				border-bottom: 0px;
			}

			.drag-item-td {
				border-right: 1px solid #dcdcdc;
				flex: 1;
				padding: 12px 6px;
			}

			.drag-tr>.drag-item-td:last-child {
				border-right: 0px;
			}

			.drag-item-td-operate {
				display: flex;
				flex-wrap: wrap;
			}

			.move-enter {
				background-color: #dcdcdc;
			}

			.operate-btn {
				border: 1px solid #00a2ef;
				border-radius: 4px;
				padding: 6px 12px;
				font-size: 16px;
				color: #00a2ef;
				margin: 6px 6px;
				cursor: move;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="drag-wrap">
			<!-- header -->
			<div class="drag-header">
				<div class="drag-tab" draggable="true" data-id="1" data-effect="copy">毛利兰</div>
				<div class="drag-tab" draggable="true" data-id="2" data-effect="copy">毛利小五郎</div>
				<div class="drag-tab" draggable="true" data-id="3" data-effect="copy">英妃理</div>
				<div class="drag-tab" draggable="true" data-id="4" data-effect="copy">工藤新一</div>
				<div class="drag-tab" draggable="true" data-id="5" data-effect="copy">工藤优作</div>
				<div class="drag-tab" draggable="true" data-id="6" data-effect="copy">毛利博士</div>
				<div class="drag-tab" draggable="true" data-id="7" data-effect="copy">小岛元太</div>
				<div class="drag-tab" draggable="true" data-id="8" data-effect="copy">黑羽快斗</div>
				<div class="drag-tab" draggable="true" data-id="9" data-effect="copy">黑羽盗一</div>
				<div class="drag-tab" draggable="true" data-id="10" data-effect="copy">中森青子</div>
			</div>
			<!-- content -->
			<ul class="drag-content">
				<li class="drag-title">
					<div class="drag-th">ID</div>
					<div class="drag-th">状态</div>
					<div class="drag-th">性别</div>
					<div class="drag-th">操作</div>
				</li>
				<li class="drag-tr">
					<div class="drag-item-td">001</div>
					<div class="drag-item-td">上学中</div>
					<div class="drag-item-td">男</div>
					<div class="drag-item-td drag-operate" data-id="001" data-drop="copy"></div>
				</li>
				<li class="drag-tr">
					<div class="drag-item-td">002</div>
					<div class="drag-item-td">上学中</div>
					<div class="drag-item-td">男</div>
					<div class="drag-item-td drag-operate" data-id="002" data-drop="copy"></div>
				</li>
				<li class="drag-tr">
					<div class="drag-item-td">003</div>
					<div class="drag-item-td">上学中</div>
					<div class="drag-item-td">女</div>
					<div class="drag-item-td drag-operate" data-id="003" data-drop="copy"></div>
				</li>
				<li class="drag-tr">
					<div class="drag-item-td">004</div>
					<div class="drag-item-td">研发中</div>
					<div class="drag-item-td">男</div>
					<div class="drag-item-td drag-operate" data-id="004" data-drop="copy"></div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		const dragContainer = document.querySelector(".drag-wrap");
		//暂存原始节点
		let sourceNode = null;

		//是否离开
		let dragLeave = false;

		dragContainer.addEventListener("dragstart", (e) => {
			console.log("[dragstart]", e.target)
			//DataTransfer.effectAllowed 属性指定拖放操作所允许的一个效果
			e.dataTransfer.effectAllowed = e.target.dataset.effect;
			sourceNode = e.target;
		})


		/**
		 * 拖拽的元素悬浮在元素上，触发事件
		 * **/
		dragContainer.addEventListener("dragover", (e) => {
			e.preventDefault()
		})

		/**
		 * 判断当前节点或者它的父节点是否设置了data-drop="copy"
		 * **/
		function judgeDropNode(node) {
			while (node) {
				// 先判断当前节点是否包含data-drop="copy"
				if (node.dataset && node.dataset.drop === 'copy') {
					return node;
				}
				//在判断它的父节点是否存在data-drop="copy"
				node = node.parentNode
			}
		}

		/**
		 * 拖拽的元素进入某个元素触发事件
		 * **/
		dragContainer.addEventListener("dragenter", (e) => {
			console.log("[dragenter]", e.target)
			clearStyle();
			const dropNode = judgeDropNode(e.target);
			console.log("[node]", dropNode)

			if (dropNode && (dropNode.dataset.drop === e.dataTransfer.effectAllowed)) {
				dropNode.classList.add("move-enter");
			}

		})

		/**
		 * 拖拽的元素放手了之后触发的事件
		 * **/
		dragContainer.addEventListener("drop", (e) => {
			console.log("[drop]", e.target)
			const dropNode = judgeDropNode(e.target);
			console.log("[node]", dropNode)

			if (dropNode && (dropNode.dataset.drop === e.dataTransfer.effectAllowed)) {
				if (dropNode.dataset.drop === 'copy') {
					const btn = document.createElement("div");
					btn.classList.add("operate-btn");
					btn.innerText = sourceNode.innerText;
					btn.dataset.id = sourceNode.dataset.id;
					dropNode.appendChild(btn);
					eventHandle(sourceNode.dataset.id, dropNode.dataset.id);
				}
			}
		})

		/**
		 * 拖拽离开
		 * **/
		dragContainer.addEventListener("dragleave", (e) => {
			console.log("[dragleave]", e.target)
		})

		/**
		 * 拖拽结束
		 * **/
		dragContainer.addEventListener("dragend", (e) => {
			console.log("[dragend]", e.target)
			clearStyle();
		})

		//清除原来添加的样式
		function clearStyle() {
			document.querySelectorAll(".drag-operate").forEach(item => {
				item.classList.remove("move-enter");
			});
		}

		function eventHandle(id, parentID) {
			console.log("[]", id, parentID)
		}
	</script>
</html>

drap API