首頁 > 開發者 > JavaScript
JS實現的簡單拖拽購物車功能樣本【附源碼下載】，購物車源碼下載
本文執行個體講述了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>
運行效果：
附：完整執行個體代碼點擊此處本站下載。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
