通过拖动将商品添加到购物车效果代码实例
分类:实例代码
分享一段代码实例,它实现了通过拖动,将商品添加到购物车的功能。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } li { list-style: none; float: left; width: 200px; border: 1px #000 solid; margin: 30px; } li{ height: 160px; width: 200px; } p { height: 20px; border-bottom: 1px #333 dashed; } .div1 { height: 360px; border: 1px gray solid; margin: 130px auto; position: relative; overflow: hidden; } .div2 { border: 1px #000 solid; height: 300px; margin-top: 120px; clear: both; } .box1 { float: left; width: 200px; text-align: center; } .box2 { float: left; width: 200px; text-align: center; } .box3 { float: left; width: 200px; text-align: center; } .allMoney { float: right; } </style> <script> window.onload = function() { var aLi = document.getElementsByTagName('li'); var oDiv = document.getElementsByClassName('div2')[0]; var obj = {}; var iNum = 0; var allMoney = null; for (var index = 0; index < aLi.length; index++) { aLi[index].ondragstart = function (ev) { var aP = this.getElementsByTagName('p'); ev.dataTransfer.setData('title', aP[0].innerHTML); ev.dataTransfer.setData('money', aP[1].innerHTML); ev.dataTransfer.setDragImage(this, 0, 0); }; oDiv.ondragover = function(ev) { ev.preventDefault(); } oDiv.ondrop = function(ev) { ev.preventDefault(); var Ltitle = ev.dataTransfer.getData('title'); var Lmoney = ev.dataTransfer.getData('money'); if (!obj[Ltitle]) { var oP = document.createElement('p'); var oSpan = document.createElement('span'); oSpan.className = 'box1'; oSpan.innerHTML = 1; oP.appendChild(oSpan); var oSpan = document.createElement('span'); oSpan.className = 'box2'; oSpan.innerHTML = Ltitle; oP.appendChild(oSpan); var oSpan = document.createElement('span'); oSpan.className = 'box3'; oSpan.innerHTML = Lmoney; oP.appendChild(oSpan); oDiv.appendChild(oP); obj[Ltitle] = 1; } else { var aBox1 = document.getElementsByClassName('box1'); var aBox2 = document.getElementsByClassName('box2'); for (var index = 0; index < aBox2.length; index++) { if (aBox2[index].innerHTML == Ltitle) { aBox1[index].innerHTML = parseInt(aBox1[index].innerHTML) + 1; } } } if (!allMoney) { allMoney = document.createElement('div'); allMoney.className = 'allMoney'; } iNum += parseInt(Lmoney); allMoney.innerHTML = '合计:' + iNum + '¥'; oDiv.appendChild(allMoney); } } } </script> </head> <body> <div class="div1"> <ul> <li draggable="true"> <p>javascript高级程序设计</p> <p>78¥</p> </li> <li draggable="true"> <p>你不知道的javascript</p> <p>26¥</p> </li> <li draggable="true"> <p>精通javascript</p> <p>35¥</p> </li> <li draggable="true"> <p>JavaScript权威指南</p> <p>120¥</p> </li> <li draggable="true"> <p>深入浅出Node.js</p> <p>36¥</p> </li> </ul> </div> <div class="div2"> <p> <span class="box1">数量</span> <span class="box2">书名</span> <span class="box3">单价</span> </p> </div> </body> </html>
通过拖动将商品添加到购物车效果代码实例,这样的场景在实际项目中还是用的比较多的,关于通过拖动将商品添加到购物车效果代码实例就介绍到这了。
通过拖动将商品添加到购物车效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。