描述：從商品列表拖動商品到購物車之後，購物車將會增加一個商品，同時這個商品在商品列表中不會消失。如果購物車列表已經存在這個商品，則此次操作無效。
主界面：
代碼：
<!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>