溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS實現的簡單拖拽購物車功能。分享給大家供大家參考，具體如下：
<html>
<head>
<meta charset="utf-8" />
<title>使用拖放API將商品拖入購物車</title>
<style>
body {
font-size:12px
}
.liT{
border-bottom:solid 1px #ccc;
background-color:#eee;
font-weight:bold
}
.liF{
float:left;
margin-right:5px;
}
ul{
list-style-type:none;
padding:0px;
height:106px;
width:330px
}
ul li{
height:23px
}
ul li img{
width:68px;
height:96px;
border:solid 1px #ccc;
padding:3px
}
ul li span{
float:left;
width:70px;
padding:5px;
}
</style>
<script type="text/javascript">
function $$(id) {
return document.getElementById(id);
}
//自定義頁面加載時調用的函數
function pageload() {
//獲取全部的圖書商品
var Drag = document.getElementsByTagName("img");
//遍歷每一個圖書商品
for (var intI = 0; intI < Drag.length; intI++) {
//為每一個商品添加被拖放元素的dragstart事件
Drag[intI].addEventListener("dragstart",
function(e) {
var objDtf = e.dataTransfer;
objDtf.setData("text/html", addCart(this.title, this.alt, 1));
},
true);
}
var Cart = $$("ulCart");
//添加目標元素的drop事件
Cart.addEventListener("drop",
function(e) {
var objDtf = e.dataTransfer;
var strHTML = objDtf.getData("text/html");
var num=top_();
Cart.innerHTML += strHTML;
document.getElementById("num").innerHTML=num;
var price =document.getElementById("price").innerHTML;
document.getElementById("sum").innerHTML=num*price;
e.preventDefault();
e.stopPropagation();
},
false);
}
//添加頁面的dragover事件
document.ondragover = function(e) {
//阻止默認方法,取消拒絕被拖放
e.preventDefault();
}
//添加頁面drop事件
document.ondrop = function(e) {
//阻止默認方法,取消拒絕被拖放
e.preventDefault();
}
//自定義向購物車中添加記錄的函數
function addCart(a, b, c) {
var strHTML = "<li class='liC'>";
strHTML += "<span>" + a + "</span>";
strHTML += "<span id=\"price\">" + b + "</span>";
strHTML += "<span id=\"num\">" + c + "</span>";
strHTML += "<span id=\"sum\">" + b * c + "</span>";
strHTML += "</li>";
return strHTML;
}
//提示輸入框
function top_(){
var str=prompt("請輸入要購買的數量",1);
return str;
}
</script>
</head>
<body onLoad="pageload();">
<ul>
<li class="liF">
<img src="images/img02.jpg" id="img02"
alt="42" title="2006作品" draggable="true">
</li>
<li class="liF">
<img src="images/img03.jpg" id="img03"
alt="56" title="2008作品" draggable="true">
</li>
<li class="liF">
<img src="images/2.jpg" id="img04"
alt="52" title="2010作品" draggable="true">
</li>
<li class="liF">
<img src="images/1.jpg" id="img05"
alt="59" title="2011作品" draggable="true">
</li>
</ul>
<ul id="ulCart">
<li class="liT">
<span>書名</span>
<span>定價</span>
<span>數量</span>
<span>總價</span>
</li>
</ul>
</body>
</html>
運行效果：
附：完整實例代碼點擊此處本站下載。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
