JS实现的简单拖拽购物车功能示例【附源码下载】
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS实现的简单拖拽购物车功能示例【附源码下载】,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2910字,纯文字阅读大概需要5分钟。
内容图文
![JS实现的简单拖拽购物车功能示例【附源码下载】](/upload/InfoBanner/zyjiaocheng/339/d963839d7487405fa170bf8b06d4a60a.jpg)
本文实例讲述了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程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的JS实现的简单拖拽购物车功能示例【附源码下载】全部内容,希望文章能够帮你解决JS实现的简单拖拽购物车功能示例【附源码下载】所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。