HTML5自学笔记[ 10 ]简单的购物车拖拽
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5自学笔记[ 10 ]简单的购物车拖拽相关的知识，希望对你有一定的参考价值。
用html5拖拽功能实现了一个简单的购物车，样式简陋，得学学画画提高下审美了T^T：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>购物车拖拽</title> 6 7 <style> 8 *{ margin:0; padding:0;} 9 #proList{ overflow:hidden;} 10 #proList li{ list-style:none; float:left; margin:10px; padding:10px; border:1px solid #CCC;} 11 #proList img{ width:200px; height:200px;} 12 #proList p{ height:30px; text-indent:10px;} 13 #proList p a{ text-decoration:none; color:#444; } 14 15 #shopCarList{ width:500px; margin-left:10px; padding:10px; border:1px solid #ccc;} 16 #shopCarList .proInfo{ line-height:20px; } 17 #shopCarList .proInfo span{ display:inline-block;} 18 #shopCarList .proInfo .amount{ width:50px; } 19 #shopCarList .proInfo .title{ width:300px;} 20 #shopCarList .proInfo .price{ width:100px;} 21 #total{ text-align:right; border-top:1px dotted #ccc; padding:3px 0; margin-top:5px;} 22 23 </style> 24 25 <script> 26 window.onload = function(){ 27 var proList = document.getElementById(‘proList‘); 28 var aLi = proList.getElementsByTagName(‘li‘); 29 var shopCarList = document.getElementById(‘shopCarList‘); 30 var totalNow = 0; 31 var json = {}; //为产品是否已经加入购物车提供标识 32 33 for(var i=0;i<aLi.length;i++){ 34 aLi[i].ondragstart = function(ev){ 35 var aP = this.getElementsByTagName(‘p‘); 36 ev = ev || window.event; 37 ev.dataTransfer.setData(‘title‘,aP[0].innerHTML); 38 ev.dataTransfer.setData(‘price‘,parseInt(aP[1].innerHTML.substring(1))); 39 } 40 } 41 42 shopCarList.ondragover = function(ev){ 43 ev = ev || window.event; 44 ev.preventDefault(); 45 } 46 47 shopCarList.ondrop = function(ev){ 48 ev = ev || window.event; 49 ev.preventDefault(); 50 var pTitle = ev.dataTransfer.getData(‘title‘); 51 var pPrice = ev.dataTransfer.getData(‘price‘); 52 var total = document.getElementById(‘total‘); 53 54 if(!json[pTitle]){ //购物车不存在该产品时，新建该产品信息 55 56 var oDiv = document.createElement(‘div‘); 57 oDiv.className = ‘proInfo‘; 58 59 var oAmount = document.createElement(‘span‘); 60 oAmount.className = ‘amount‘; 61 oAmount.innerHTML = 1; 62 63 var oTitle = document.createElement(‘span‘); 64 oTitle.className = ‘title‘; 65 oTitle.innerHTML = pTitle; 66 67 var oPrice = document.createElement(‘span‘); 68 oPrice.className = ‘price‘; 69 oPrice.innerHTML = ‘￥‘ + pPrice; 70 71 oDiv.appendChild(oAmount); 72 oDiv.appendChild(oTitle); 73 oDiv.appendChild(oPrice); 74 75 shopCarList.appendChild(oDiv); 76 77 json[pTitle] = 1; 78 79 }else{ //若存在该产品，该产品在购物车内的数量累加 80 var aTitle = shopCarList.getElementsByClassName(‘title‘); 81 var aAmount = shopCarList.getElementsByClassName(‘amount‘); 82 /* 83 alert(aTitle.length); 84 alert(aAmount.length);*/ 85 86 for(var i=0;i<aTitle.length;i++){ 87 if(aTitle[i].innerHTML == pTitle){ 88 aAmount[i].innerHTML = parseInt(aAmount[i].innerHTML) + 1; 89 } 90 } 91 } 92 93 //计算总价值 94 if(!total){ 95 var total = document.createElement(‘div‘); 96 total.id = ‘total‘; 97 } 98 totalNow += parseInt(pPrice); 99 total.innerHTML = ‘￥‘+ totalNow; 100 shopCarList.appendChild(total); 101 } 102 } 103 104 </script> 105 106 </head> 107 108 <body> 109 110 <ul id="proList"> 111 <li draggable="true"> 112 <a href="#"><img src="imgs/TB1DDLcLXXXXXXvXFXXXXXXXXXX-200-200.jpg" alt=""/></a> 113 <p>荣耀4A</p> 114 <p>￥599</p> 115 </li> 116 <li draggable="true"> 117 <a href="#"><img src="imgs/TB2T2xNeXXXXXbRXpXXXXXXXXXX_!!1114511827.jpg" alt=""/></a> 118 <p>华为畅享5S</p> 119 <p>￥699</p> 120 </li> 121 <li draggable="true"> 122 <a href="#"><img src="imgs/TB2t3WCfpXXXXcXXXXXXXXXXXXX_!!1114511827.jpg" alt=""/></a> 123 <p>荣耀7</p> 124 <p>￥799</p> 125 </li> 126 <li draggable="true"> 127 <a href="#"><img src="imgs/TB2YE6HeVXXXXcRXXXXXXXXXXXX_!!1114511827.jpg" alt=""/></a> 128 <p>荣耀4C</p> 129 <p>￥899</p> 130 </li> 131 </ul> 132 <div id="shopCarList"></div> 133 134 135 </body> 136 </html>
以上是关于HTML5自学笔记[ 10 ]简单的购物车拖拽的主要内容，如果未能解决你的问题，请参考以下文章