JS实现的简单拖拽购物车功能示例【附源码下载】
程序员文章站
2022-04-10 22:08:04
本文实例讲述了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元玩转阿里云服务器
下一篇: vue解决一个方法同时发送多个请求的问题