JS实现的简单拖拽购物车功能示例【附源码下载】

本文实例讲述了射流研究…实现的简单拖拽购物车功能。分享给大家供大家参考，具体如下：

html healtheta字符集=' utf-8 '/title使用拖放应用程序接口将商品拖入购物车/title style body { font-size :12 px } .liT {边框-底部：实心1px # CCC背景色： # eeefont-weight:bold} .liF { float:left右边距：5 px} ul { list-style-type : no；划水：0像素重量：106像素宽度：330像素Li {高度：23像素}像素Li img {宽度：68像素；高度：96 pxborder : solid 1px # ccpadd :3 px } ul Li span { float : left；宽度：70 pxpadd :5 px }/style脚本类型=' text/JavaScript '函数$ $(id){返回文档。getelementbyid(id)；}//自定义页面加载时调用的函数函数pageload() { //获取全部的图书商品var Drag=文档。getelementsbytagname(' img ')；//遍历每一个图书商品for(var InTi=0；拖动长度；intI ) { //为每一个商品添加被拖放元素的开始拖动事件拖动[intI].addEventListener('dragstart '，函数(e){ var Objdtf=e . DataTransfer；objDtf.setData('text/html '，addCart(this.title，this.alt，1))；},真);} var Cart=$ $(' ulCart ')；//添加目标元素的滴事件Cart.addEventListener('drop '，函数(e){ var Objdtf=e . data transfer；var strHTML=objdtf。getdata(' text/html ')；var num=top _()；cart . innerhtml=strhtmldocument . getelementbyid(' num ').innerHTML=numvar price=document。getelementbyid(' price ').innerhtml document . getelementbyid(' sum ').innerHTML=num * pricee。PreventDefault()；e . stopperpagation()；}，false)；}//添加页面的拖挂事件文件。ondragover=function(e){//阻止默认方法，取消拒绝被拖放e . PreventDefault()；}//添加页面滴事件document.ondrop=function(e) { //阻止默认方法，取消拒绝被拖放e . PreventDefault()；}//自定义向购物车中添加记录的函数函数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 '；返回strHTML}//提示输入框函数top_(){ var str=prompt('请输入要购买的数量',1);返回字符串；}/script/head body OnLoAd=' page LoAd()；ul Li class=' LiF ' img src=' http : images/img 02。jpg ' id=' img 02 ' alt=' 42 ' title=' 2006作品可拖动=' true '/Li Li class=' LiF ' img src=' http : images/img 03。jpg ' id=' img 03 ' alt=' 56 ' title=' 2008作品draggable=' true '/Li Li class=' LiF ' img src=' http : images/2。jpg ' id=' img 04 ' alt=' 52 ' title=' 2010作品draggable=' true '/Li Li class=' LiF ' img src=' http : images/1。jpg ' id=' img 05 ' alt=' 59 ' title=' 2011作品可拖动=' true '/Li/ul ul ul id=' ulCart ' Li class=' LIt ' span书名/span跨度定价/span跨度数量/span跨度总价/span /li /ul/body/html运行效果：

附：完整实例代码点击此处本站下载。

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。