html5实现商品拖拽到购物车效果/drag

最新推荐文章于 2021-07-26 08:40:08 发布

Supreme_lwl

最新推荐文章于 2021-07-26 08:40:08 发布

阅读量3.6k

点赞数

分类专栏：前端 html5 JavaScript

本文链接：https://blog.csdn.net/qq_42515626/article/details/104808964

版权

前端同时被 3 个专栏收录

27 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

html5

6 篇文章 0 订阅

订阅专栏

描述：从商品列表拖动商品到购物车之后，购物车将会增加一个商品，同时这个商品在商品列表中不会消失。如果购物车列表已经存在这个商品，则此次操作无效。

主界面：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<head>
	<title>购物车</title>
	<style type="text/css">
		.drag-page{
			/*position: relative;*/
			padding: 0px;
			margin: 50px auto;
		}
		.item-list{
			/*position: absolute;*/
			width: 40%;
			height: auto;
			border: 1px solid #00aaff;
			margin-left: 5%;
			float: left;
		}
		.cart{
			/*position: absolute;*/
			width: 40%;
			height: auto;
			float: right;
			border: 1px solid #00aaff;
			/*margin-left: 10%;*/
			margin-right: 5%;
		}
		.item-list-head{
			font-size: 25px;
			text-align: center;
			border-bottom: 1px solid #00aaff;
			padding: 15px;
			color: #00aaff;

		}
		.cart-head{
			font-size: 25px;
			text-align: center;
			border-bottom: 1px solid #00aaff;	
			padding: 15px;
			color: #00aaff;
		}
		.item-list-body{
			width: 100%;
		}
		img{
			height: 200px;
			width: 27%;	
			padding: 10px;
			margin-left: 10px;

		}
	</style>
</head>
<body>
	<div class="drag-page">
		<div class="item-list" ondrop="drop(event)" ondragover="allowDrop(event)">
			<div class="item-list-head">
				<span>商品列表</span>
			</div>
			<div class="item-list-body">
				<img id="item1" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=241547544,1893491713&fm=11&gp=0.jpg" draggable="true" ondragstart="drag(event)">
				<img id="item2" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=241547544,1893491713&fm=11&gp=0.jpg" draggable="true" ondragstart="drag(event)">
				<img id="item3" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=241547544,1893491713&fm=11&gp=0.jpg" draggable="true" ondragstart="drag(event)">
				<img id="item4" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=241547544,1893491713&fm=11&gp=0.jpg" draggable="true" ondragstart="drag(event)">
				<img id="item5" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=241547544,1893491713&fm=11&gp=0.jpg" ondragstart="drag(event)">
			</div>
		</div>
		<div class="cart" ondrop="drop(event)" ondragover="allowDrop(event)">
			<div class="cart-head">
				<span>购物车</span>
			</div>
			<div class="cart-body">
				<img id="cart1" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1949818023,3337169081&fm=26&gp=0.jpg" ondragstart="drag(event)">
			</div>
		</div>
	</div>

	<script type="text/javascript">
		function allowDrop(ev)
		{
			ev.preventDefault();
			ev.stopPropagation();
		}

		function drag(ev)
		{
			ev.dataTransfer.effectAllowed = "copy";//复制效果
			// ev.dataTransfer.effectAllowed = "link";//移动效果
			ev.dataTransfer.setData("Text",ev.target.id);
		}

		function drop(ev)
		{
			allowDrop(ev);
			var data=ev.dataTransfer.getData("Text");

			if(ev.target.tagName == "DIV"){
				var targetClassName = ev.target.className;
				var allNodes = document.getElementsByClassName(targetClassName)[0].childNodes;
				console.log(allNodes);

				for(let i=0;i<allNodes.length;i++){//购物车去重
					if(allNodes[i].id == data){
						return;
					}
				}

				ev.target.appendChild(document.getElementById(data).cloneNode());
			}else if(ev.target.tagName == "IMG"){
				var targetClassName = ev.target.parentNode.className;
				var allNodes = document.getElementsByClassName(targetClassName)[0].childNodes;
				console.log(allNodes);

				for(let i=0;i<allNodes.length;i++){//购物车去重
					if(allNodes[i].id == data){
						return;
					}
				}

				ev.target.parentNode.appendChild(document.getElementById(data).cloneNode());
			}
			
		}
	</script>
</body>
</html>

Supreme_lwl

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
html5实现商品拖拽到购物车效果/drag

描述：从商品列表拖动商品到购物车之后，购物车将会增加一个商品，同时这个商品在商品列表中不会消失。如果购物车列表已经存在这个商品，则此次操作无效。主界面：代码：<!DOCTYPE html><html><head> <title>购物车</title> <style type="text/css"> .dra...
复制链接

扫一扫