前言：
w：I wanna bring you into my heart。
實現購物列表中的購物車拖曳效果
預覽如下：
shoppingShow.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漫步時尚廣場-購物列表</title>
<link href="css/show.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/shoppingCart.js"></script>
<script type="text/javascript" src="js/hotAdvise.js"></script>
</head>
<body>
<!--頂部區域 start-->
<div class="top_bg">
<div class="top_content">
<div class="floatl"><img src="images/star.jpg">收藏 | HI，歡迎來訂購 ！<a href="../manageadmin/login.html" class="orange">[請登錄]</a> <a href="../register/register.html" class="orange"> [免費註冊]</a></div>
<div class="floatr">客戶服務<img src="images/arrow.gif"> 網站導航<img src="images/arrow.gif">
<div class="xl">
<!--購物車-->
<div class="droparrow" onclick="showCar()"><span class="shopcart"></span>我的購物車
<span class="orange">0</span>件<img src="images/arrow.gif"/></div>
<!--下拉菜單-->
<div class="dropdown" id="dropdown" style="display: none"
ondrop="drop(event)" ondragover="allowDrop(event)">
<!--<div class="gwc"></div><h3>購物車爲空，現在去挑選幾件商品</h3></div>-->
<ul class="shop_pic">
<!--<li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
<p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
</li>
<li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
<p>2件<a href="#"><span class="orange floatr">刪除</span></a></p>
</li>
<li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
<p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
</li>
<li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
<p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
</li>
<li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
<p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
</li>
<li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
<p>1件<a href="#"><span class="orange floatr">刪除</span></a></p>
</li>-->
</ul>
</div>
</div>
</div>
</div>
</div>
<!--頂部區域 end-->
<div class="clear"></div>
<!--logo和banner start-->
<div class="logo"><a href="../index.html"><img src="images/logo.jpg" ></a><img src="images/banner.jpg" class="floatr "></div>
<!--logo和banner end-->
<!--菜單導航欄 start-->
<div class="nav_bg">
<div class="nav_content">
<ul class="nav">
<li ><a href="shoppingIndex.html" class="white">首頁</a></li>
<li class="nav_active" ><a href="shoppingShow.html" class="white">最新上架</a></li>
<li>品牌活動</li>
<li>原廠直供</li>
<li>團購</li>
<li>限時搶購</li>
<li>促銷打折</li>
</ul>
</div>
</div>
<!--菜單導航欄 end-->
<!--中間部分 start-->
<div class="main">
<!--購物分類 start-->
<ul class="menu">
<li ><span class="title">女裝</span></li>
<li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#" >下裝</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#" >連衣裙</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#" >內衣</a><span class="right_arrow"></span></li>
<li><span class="title">男裝</span></li>
<li><span class="red_dot"></span><a href="#" >T恤</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#" >短褲</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#" >襯衫</a><span class="right_arrow"></span></li>
<li><span class="title">童裝</span></li>
<li><span class="red_dot"></span><a href="#" >上衣</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#" >褲子</a><span class="right_arrow"></span></li>
<li><span class="title">運動</span></li>
<li><span class="red_dot"></span><a href="#" >運動褲</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#" >跑步鞋</a><span class="right_arrow"></span></li>
</ul>
<!--購物分類end-->
<!--中間區 start-->
<div class="middle">
<h1 class="pic_title">最新上架</h1>
<div class="pic_list">
<script type="text/javascript">
var images=["yifu1.jpg","yifu2.jpg","yifu3.jpg","yifu4.jpg","yifu5.jpg","yifu6.jpg","yifu7.jpg","yifu8.jpg",];
var prices=["198.00","69.00","160.00","210.00","70.00","146.00","69.00","239.00"];
var buyers=[324,534,643,678,567,4567,1345,789];
var contents=["冬季新款牛仔外套加厚連帽毛領加絨牛仔棉衣","2015夏新款韓版 透氣舒適簡約半截袖T恤衫","韓版甜美氣質亮片熱氣球字母中長款圓領短袖T恤","2015款秋新款甜美學院立領中袖套頭格子襯衫娃娃衫","2015款秋新款甜美學院立領中袖套頭格子襯衫娃娃衫","大碼女裝胖mm2015夏裝新款韓版顯瘦露肩鏤空連衣裙","v領雪紡背心女夏外穿雙層吊帶打底衫百搭顯瘦無袖上衣","韓版印花無袖短裙背心裙女 高腰連衣裙A字裙秋季"];
for(var i=0;i<images.length;i++){
var goodsInfo="<dl><div><img src='images/shopshow/"+images[i]+"' /></div><dt><span class='price'>￥"+prices[i]
+"元</span><span class='font12'>"+buyers[i]+"人購買</span></dt><dd>"
+contents[i]+"</dd></dl>";
document.write(goodsInfo);
}
</script>
<!-- <dl>
<div><a href="shoppingDetail.html" target="_blank"><img src="images/shopshow/yifu1.jpg" /></a></div>
<dt><span class="price">￥198.00元</span><span class="font12">324人購買</span></dt>
<dd>冬季新款牛仔外套加厚連帽毛領加絨牛仔棉衣</dd>
</dl>
<dl>
<div><img src="images/shopshow/yifu2.jpg" /></div>
<dt><span class="price">￥69.00元</span><span class="font12">534人購買</span></dt>
<dd>2015夏新款韓版 透氣舒適簡約半截袖T恤衫</dd>
</dl>
<dl>
<div><img src="images/shopshow/yifu3.jpg" /></div>
<dt><span class="price">￥160.00元</span><span class="font12">643人購買</span></dt>
<dd>韓版甜美氣質亮片熱氣球字母中長款圓領短袖T恤</dd>
</dl>
<dl>
<div><img src="images/shopshow/yifu4.jpg" /></div>
<dt><span class="price">￥210.00元</span><span class="font12">678人購買</span></dt>
<dd>2015款秋新款甜美學院立領中袖套頭格子襯衫娃娃衫</dd>
</dl>
<dl>
<div><img src="images/shopshow/yifu5.jpg" /></div>
<dt><span class="price">￥70.00元</span><span class="font12">567人購買</span></dt>
<dd>2015款秋新款甜美學院立領中袖套頭格子襯衫娃娃衫</dd>
</dl>
<dl>
<div><img src="images/shopshow/yifu6.jpg" /></div>
<dt><span class="price">￥146.00元</span><span class="font12">4567人購買</span></dt>
<dd>大碼女裝胖mm2015夏裝新款韓版顯瘦露肩鏤空連衣裙</dd>
</dl>
<dl>
<div><img src="images/shopshow/yifu7.jpg" /></div>
<dt><span class="price">￥69.00元</span><span class="font12">1345人購買</span></dt>
<dd>v領雪紡背心女夏外穿雙層吊帶打底衫百搭顯瘦無袖上衣</dd>
</dl>
<dl>
<div><img src="images/shopshow/yifu8.jpg" /></div>
<dt><span class="price">￥239.00元</span><span class="font12">789人購買</span></dt>
<dd>韓版印花無袖短裙背心裙女 高腰連衣裙A字裙秋季 </dd>
</dl>-->
</div>
<!--品牌活動-->
<h1 class="pic_title">品牌活動</h1>
<ul class="pic_list2">
<script type="text/javascript">
var images=["dress1.jpg","dress2.jpg","dress3.jpg","dress4.jpg"];
var contents=["獨家定製 V 雙層歐根紗裏襯 色織時裝料大牌範蓬蓬長裙","夏季新款 子域D5656E 簡約通勤腰帶修身大擺短袖連衣裙","愛美斯 2015夏季優雅顯瘦大擺長裙 中長款復古印花淑女裙","億婷2015夏女裝新品顯瘦飄逸黑白豎條紋闊腿褲七分褲裙"];
for(var i in images){
var goodsInfo="<li><img src='images/shopshow/"+images[i]+"' /><p>"
+contents[i]+"</p></li>";
document.write(goodsInfo);
}
</script>
<!-- <li><img src="images/shopshow/dress1.jpg" />
<p>獨家定製 V 雙層歐根紗裏襯 色織時裝料大牌範蓬蓬長裙</p>
</li>
<li><img src="images/shopshow/dress2.jpg" />
<p>夏季新款 子域D5656E 簡約通勤腰帶修身大擺短袖連衣裙</p>
</li>
<li><img src="images/shopshow/dress3.jpg" />
<p>愛美斯 2015夏季優雅顯瘦大擺長裙 中長款復古印花淑女裙 </p>
</li>
<li><img src="images/shopshow/dress4.jpg" />
<p>億婷2015夏女裝新品顯瘦飄逸黑白豎條紋闊腿褲七分褲裙</p>
</li>-->
</ul>
</div>
<!--中間區 end-->
<!--右側熱門推薦 start-->
<div class="right_nav" id="right_nav">
<!--
<h1 class="notice_title">熱門推薦</h1>
<ul class="pic_list3">
<li><a href="#"><img src="images/shopshow/s1.jpg" /></a>
<p class="price2">￥56.00元</p>
</li>
<li><a href="#"><img src="images/shopshow/s2.jpg" /></a>
<p class="price2">￥97.00元</p>
</li>
<li><a href="#"><img src="images/shopshow/s3.jpg" /></a>
<p class="price2">￥89.00元</p>
</li>
<li><a href="#"><img src="images/shopshow/s4.jpg" /></a>
<p class="price2">￥69.00元</p>
</li>
<li><a href="#"><img src="images/shopshow/s5.jpg" /></a>
<p class="price2">￥89.00元</p>
</li>
<li><a href="#"><img src="images/shopshow/s6.jpg" /></a>
<p class="price2">￥93.00元</p>
</li>
<li><a href="#"><img src="images/shopshow/s7.jpg" /></a>
<p class="price2">￥58.00元</p>
</li>
<li><a href="#"><img src="images/shopshow/s8.jpg" /></a>
<p class="price2">￥69.00元</p>
</li>
<li><a href="#"><img src="images/shopshow/s9.jpg" /></a>
<p class="price2">￥78.00元</p>
</li>
</ul>-->
<!--使用腳本的方向定時更新推,下面引入腳本代碼也可以放在<head>標籤之內薦信息-->
</div>
<!--右側熱門推薦 end-->
</div>
<!--中間部分 end-->
<!--底部 start-->
<div class="clear"></div>
<div class="footer">
<div class="gotop"></div>
<div class="foot_title">
<ul class="foot_pic">
<li><img src="images/gray1.jpg" ></li>
<li><img src="images/gray2.jpg" ></li>
<li><img src="images/gray3.jpg" ></li>
<li><img src="images/gray4.jpg" ></li>
<li><img src="images/gray5.jpg" ></li>
</ul>
</div>
<ul class="foot_list">
<li>
<div class="floatl">
<p class="red1"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class="font16 padding-bottom">新手指導</li>
<li>用戶註冊</li>
<li>電話下單</li>
<li>購物流程</li>
<li>購物保障</li>
<li>服務協議</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red2"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class="font16 padding-bottom">支付方式</li>
<li>貨到付款</li>
<li>商城卡支付</li>
<li>支付寶、網銀支付</li>
<li>優惠券抵用</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red3"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class="font16 padding-bottom">配送方式</li>
<li>閃電發貨</li>
<li>滿百包郵</li>
<li>配送範圍及時間</li>
<li>商品驗收及簽收</li>
<li>服務協議</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red3"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class="font16 padding-bottom">售後服務</li>
<li>退換貨協議</li>
<li>關於發票</li>
<li>退換貨流程</li>
<li>退換貨運費</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red3"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class="font16 padding-bottom">關於帳號</li>
<li>修改個人信息</li>
<li>修改密碼</li>
<li>找回密碼</li>
</ul>
</li>
<li>
<div class="floatl">
<p class="red3"></p>
<p class="line1"></p>
</div>
<ul class="floatl">
<li class="font16 padding-bottom">優惠活動</li>
<li>競拍須知</li>
<li>搶購須知</li>
</ul>
</li>
</ul>
<div class="clear"></div>
<div class="foot_line"></div>
<p align="center" class="padding-top">Copyright 2015-2020 Q- Walking Fashion E&S 漫步時尚廣場（QST教育）版權所有<Br/>
中國青島 高新區河東路8888號 青軟教育集團 諮詢熱線：400-658-0166 400-658-1022 </p>
<p align="center"><img src="images/foot_pic.jpg"></p>
<div class="clear"></div>
</div>
<!--底部 end-->
</body>
</html>
show.css,hotAdvise.js參考：
https://blog.csdn.net/weixin_43912621/article/details/105444096.
shoppingCart.js:
// Created by guoqy
//購物車的顯示與隱藏
function showCar(){
var shopCar = document.getElementsByClassName("dropdown")[0];
var rightNav = document.getElementsByClassName("right_nav")[0];
switch(shopCar.style.display){
case "":
case "none":
shopCar.style.display = "block";
rightNav.style.position = "relative";
//下移熱門推薦模塊
//rightNav.style.top = "100px";
shopCar.innerHTML = loadCar();
break;
case "block":
shopCar.style.display = "none";
rightNav.style.position = "static";
break;
}
}
//定義一個商品對象
var goods={goodsSrc: null, goodsNum: 1};
//設置拖拽效果
function drag(e){
e=e||event;
e.dataTransfer.effectAllowed = "copy";
//IE需通過服務器訪問方式，FF、chrome支持本地方式進行訪問
e.dataTransfer.setData("text", e.target.src); //IE兼容寫法
//e.dataTransfer.setData("text/plain", e.target.src); //標準寫法
}
//拖拽釋放效果
function drop(e){
//方式拖拽事件傳播
allowDrop(e);
//從拖拽事件中獲取數據
var data=e.dataTransfer.getData("text");
//e.target.id=="dropdown"，表示目標對象是div（dropdown）
//e.target.parentNode.id=="dropdown"表示目標對象是dropdown的直接子元素UL
//e.target.parentNode.parentNode.id=="dropdown" 表示目標對象是UL中的LI
//e.target.parentNode.parentNode.parentNode.id=="dropdown"表示目標對是<a>元素
//e.target.parentNode.parentNode.parentNode.parentNode.id=="dropdown"表示目標對象是<img>元素
if(e.target.id=="dropdown" || e.target.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.parentNode
.parentNode.id=="dropdown"){
//從localStorage中嘗試根據Src讀取數據
var newGoods=readFromStorage(data);
//如果localStorage中存在當前商品，則在原基礎上加1
if (newGoods!=null){
for(var i=0; i<localStorage.length; i++){
if(data==newGoods.goodsSrc) {
newGoods.goodsNum+=1;
goods=newGoods;
break;
}
}
}else{
//如果localStorage中，沒有該商品，創建一個新對象，且商品數量爲1
goods.goodsSrc=data;
goods.goodsNum=1;
}
//把處理後的商品信息存儲到localStorage
localStorage.setItem(data, JSON.stringify(goods));
//重新加載並刷新頁面中的購物車
document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
}
}
//阻止被拖拽的圖片在新窗口打開
function allowDrop(e){
e.preventDefault();//通知瀏覽器不再執行事件相關的默認動作
e.stopPropagation();//阻止事件冒
}
//根據key讀取localStorage的值並封裝成JSON
function readFromStorage(key){
var jsonStr=localStorage.getItem(key);
var newGoods=JSON.parse(jsonStr);
return newGoods;
}
//加載購物車
function loadCar(){
//localStorage不爲空時，將購物車中的信息讀出來並顯示到頁面中
if(localStorage.length!=0){
var ulObject=document.createElement("ul");
ulObject.className="shop_pic";
for(var i=0; i<localStorage.length; i++){
var key=localStorage.key(i);
goods=readFromStorage(key);
if(goods!=null) {
var liObject=document.createElement("li");
liObject.innerHTML='<a href="#"><img src="'+goods.goodsSrc
+'" width="80px" height="96px"/></a><p>'+goods.goodsNum
+'件<a href="javascript:void(0)" οnclick="delStorage(this)"><span class="orange floatr">刪除</span></a></p>';
}
ulObject.appendChild(liObject);
}
return ulObject.outerHTML;
}
return "購物車還是空的，趕快加點東西吧~";
}
//從localStorage中刪除某個元素
function delStorage(element){
//獲得被點擊的<a>元素的對應的img標籤的src屬性
var targetSrc=element.parentNode.parentNode.childNodes[0]
.childNodes[0].src;
//根據src屬性讀取localStorage中的商品
var delGoods=readFromStorage(targetSrc);
delGoods.goodsNum-=1;
//如果商品數量等於0，則移除該商品
if(delGoods.goodsNum==0){
localStorage.removeItem(targetSrc);
}else{
//如果商品數量大於0，將修改後的信息保存到localStorage中
localStorage.setItem(targetSrc,JSON.stringify(delGoods));
}
//刪除成功後，重新加載並更新頁面中的購物車
document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
}
//窗口加載時，爲允許拖拽的圖片添加draggable屬性和ondragstart事件
window.onload=function(){
var pic_list=document.getElementsByClassName("pic_list")[0];
var pic_list_div=pic_list.getElementsByTagName("div");
for(var i=0;i<pic_list_div.length;i++){
var image=pic_list_div[i].getElementsByTagName("img")[0];
image.setAttribute("draggable",true);
image.ondragstart=drag;
}
}
後記：
