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>
运行效果:
附:完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
赞 (0)