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>
时间: 2024-10-24 06:24:19

HTML5自学笔记[ 10 ]简单的购物车拖拽的相关文章

HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 这篇博客直接在上篇的基础上完成,最终效果: 效果图1: 效果图2: 好了,请允许我把图片贴了两遍,方便大家看效果了~ 可以看出我们的图片的li的html其实还是挺复杂的,于是我把html文档做了一些修改: <span style=&quo

简单的鼠标拖拽效果(原生js实现)

之前在聊天群里看到有人说面试的时候被问到了怎样实现一个拖拽效果,当时看到后在心里默默思考了下,结果发现好像我也写不出来啊.本着遇到一个解决一个的思想,就亲自敲了一个,看到张鑫旭大神写的代码,真的很厉害,多多学习了,(感觉随便搜一个关于前端方面的问题都能看到他的网站,真是太佩服了,写了那么多文章,十分感谢.)好了,接下来就进入正题了.想实现一个效果首先得明白其中的逻辑,知道了实现逻辑后,就可以码代码了.首先我实现的效果是: 鼠标按下后,才可以执行后续效果 鼠标已经按下,然后鼠标移动,需要拖拽的元素

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>马赛克</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[20 ]canvas绘图实例之绘制倒影

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>倒影</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[ 8 ]历史管理

触发历史管理的三种方法: 跳转页面 改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <title>随机产生彩票号码</title> 5 <meta charset="utf-8"/> 6 <script> 7 window.onload = func

HTML5自学笔记[ 24 ]canvas绘图之星空草地

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 body{ background:#fff;} 9 div{ width:800px; height:600px; margin:0 auto;} 10 canvas{ backg

linux自学笔记--lamp简单配置

1.httpd配置 (1)基本设置 Listen 80 端口 DocumentRoot /var/www 根目录 DirectoryIndex index.html 主页 Alias /icon/ "/download/newicon" 路径别名 ErrorDocument 404 /missing.html 404文件 ExtendeStatus On 220行左右,状态页面,在920左右定义具体 (2)访问控制 <Directory "/var/www/html&q

HTML5自学笔记[ 17 ]canvas绘图基础4

绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘制后的图形大小. drawImage(oImg,x1,y1,w1,h1,x2,y2,w2,h2),该方法获取源图像的一部分进行绘制并且指定绘制起点和绘制后图像的大小,x1/y1/w1/h1表示选取源图上(x1,y1)点起宽w1高h1的部分,x2/y2/w2/h2表示将选取的部分绘制到画布(x2,y2

HTML5自学笔记[ 3 ]表单验证反馈

表单控件对象的validity对象可以设置或返回相关的验证信息(在invalid事件处理中获取validity对象): 属性valid:为true所有验证通过,为False至少有一种验证失败. 属性valueMissing:表单控件输入值为空时,该属性值为true:不为空时该属性值为false. 属性typeMismatch:输入的内容不符合控件类型要求时,该属性为true,否则为false. 属性patternMismatch:输入的内容不匹配正则表达式时,该属性为true,否则为false.