用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>购物车拖拽</title> <style> *{ margin:0; padding:0;} #proList{ overflow:hidden;} #proList li{ list-style:none; float:left; margin:10px; padding:10px; border:1px solid #CCC;} #proList img{ width:200px; height:200px;} #proList p{ height:30px; text-indent:10px;} #proList p a{ text-decoration:none; color:#444; } #shopCarList{ width:500px; margin-left:10px; padding:10px; border:1px solid #ccc;} #shopCarList .proInfo{ line-height:20px; } #shopCarList .proInfo span{ display:inline-block;} #shopCarList .proInfo .amount{ width:50px; } #shopCarList .proInfo .title{ width:300px;} #shopCarList .proInfo .price{ width:100px;} #total{ text-align:right; border-top:1px dotted #ccc; padding:3px 0; margin-top:5px;} </style> <script> window.onload = function(){ var proList = document.getElementById('proList'); var aLi = proList.getElementsByTagName('li'); var shopCarList = document.getElementById('shopCarList'); var totalNow = 0; var json = {}; //为产品是否已经加入购物车提供标识 for(var i=0;i<aLi.length;i++){ aLi[i].ondragstart = function(ev){ var aP = this.getElementsByTagName('p'); ev = ev || window.event; ev.dataTransfer.setData('title',aP[0].innerHTML); ev.dataTransfer.setData('price',parseInt(aP[1].innerHTML.substring(1))); } } shopCarList.ondragover = function(ev){ ev = ev || window.event; ev.preventDefault(); } shopCarList.ondrop = function(ev){ ev = ev || window.event; ev.preventDefault(); var pTitle = ev.dataTransfer.getData('title'); var pPrice = ev.dataTransfer.getData('price'); var total = document.getElementById('total'); if(!json[pTitle]){ //购物车不存在该产品时,新建该产品信息 var oDiv = document.createElement('div'); oDiv.className = 'proInfo'; var oAmount = document.createElement('span'); oAmount.className = 'amount'; oAmount.innerHTML = 1; var oTitle = document.createElement('span'); oTitle.className = 'title'; oTitle.innerHTML = pTitle; var oPrice = document.createElement('span'); oPrice.className = 'price'; oPrice.innerHTML = '¥' + pPrice; oDiv.appendChild(oAmount); oDiv.appendChild(oTitle); oDiv.appendChild(oPrice); shopCarList.appendChild(oDiv); json[pTitle] = 1; }else{ //若存在该产品,该产品在购物车内的数量累加 var aTitle = shopCarList.getElementsByClassName('title'); var aAmount = shopCarList.getElementsByClassName('amount'); /* alert(aTitle.length); alert(aAmount.length);*/ for(var i=0;i<aTitle.length;i++){ if(aTitle[i].innerHTML == pTitle){ aAmount[i].innerHTML = parseInt(aAmount[i].innerHTML) + 1; } } } //计算总价值 if(!total){ var total = document.createElement('div'); total.id = 'total'; } totalNow += parseInt(pPrice); total.innerHTML = '¥'+ totalNow; shopCarList.appendChild(total); } } </script> </head> <body> <ul id="proList"> <li draggable="true"> <a href="#"><img src="imgs/TB1DDLcLXXXXXXvXFXXXXXXXXXX-200-200.jpg" alt=""/></a> <p>荣耀4A</p> <p>¥599</p> </li> <li draggable="true"> <a href="#"><img src="imgs/TB2T2xNeXXXXXbRXpXXXXXXXXXX_!!1114511827.jpg" alt=""/></a> <p>华为畅享5S</p> <p>¥699</p> </li> <li draggable="true"> <a href="#"><img src="imgs/TB2t3WCfpXXXXcXXXXXXXXXXXXX_!!1114511827.jpg" alt=""/></a> <p>荣耀7</p> <p>¥799</p> </li> <li draggable="true"> <a href="#"><img src="imgs/TB2YE6HeVXXXXcRXXXXXXXXXXXX_!!1114511827.jpg" alt=""/></a> <p>荣耀4C</p> <p>¥899</p> </li> </ul> <div id="shopCarList"></div> </body> </html>
HTML5自学笔记[ 10 ]简单的购物车拖拽的更多相关文章
-
JAVA自学笔记10
JAVA自学笔记10 1.形式参数与返回值 1)类名作为形式参数(基本类型.引用类型) 作形参必须是类的对象 2)抽象类名作形参 需要该抽象类的子类对象,通过多态实现 3)接口名为形参 需要的是该接口 ...
-
HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...
-
HTML5自学笔记[ 9 ]HTML5实现元素的拖放
要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不 ...
-
Html5 自学笔记
1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...
-
Android学习系列(10)--App列表之拖拽ListView(上)
研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨. 鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...
-
【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件
前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它 打个比方:<海贼王> ...
-
HTML5深入学习之鼠标跟随,拖拽事件
知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover: 当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...
-
HTML5学习笔记一 简单学习HTML5
什么是HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言 标记语言是一 ...
-
HTML5自学笔记[ 21 ]canvas绘图实例之马赛克
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
-
Vs2012编写C语言
本来我也是用VC++6.0编写C语言的,但是由于这个版本过老并且和win7,win8,win10的不兼容所以去下载了vs2012,一开始的时候不知道怎么用,现在学会了就写一个教程分享一下. 这时就遇到 ...
-
Atitit 开发2d游戏的技术选型attilax总结
Atitit 开发2d游戏的技术选型attilax总结 1.1. 跨平台跨平台:一定要使用跨平台的gui技术,目前最好的就是h5(canvas,webgl,dom) +js了..1 1.2. 游戏前后 ...
-
elasticsearch中的API
elasticsearch中的API es中的API按照大类分为下面几种: 文档API: 提供对文档的增删改查操作 搜索API: 提供对文档进行某个字段的查询 索引API: 提供对索引进行操作 查看A ...
-
《转》常用Petri网模拟软件工具简介
本文转载自liusj2003,如给您带来不便之处,请联系博主. 首先要介绍的的一个非常有名的Petri 网网站--Petri Nets World: http://www.informatik.uni ...
-
使用AppCan自带的升级功能实现移动端升级
1.需要在AppCan项目的config.xml文件中设置“更新地址”,即在执行uexWidget.checkUpdate();时访问的后台页面地址,比如: http://192.168.0.10:8 ...
-
解决 this virtual machine’s policies are too old to be run by this version of vmware workstation”
VMWare从6.0升级到9.0,打开以前的虚拟机报错如下:“this virtual machine’s policies are too old to be run by this version ...
-
字符编码笔记:ASCII、Unicode、UTF-8、UTF-16、UCS、BOM、Endian
转载:http://witmax.cn/character-encoding-notes.html 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问 ...
-
hdu - 4651 - Partition
题意:把一个整数N(1 <= N <= 100000)拆分不超过N的正整数相加,有多少种拆法. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid ...
-
大三小学期 web前端开发的一些小经验
1.html是页面的布局设计,就是页面上要放哪些东西,比如登录界面需要按钮,输入框等等:css是被用于使用设计部件和布局,例如哪些部件放在哪里,多宽多大,是否有边框等:js/jQuery是用于实现函数 ...
-
angular6 开发实践基础知识汇总
1 事件处理 1.1 鼠标移入事件触发 (mouseenter)=" " eg: (mouseenter)="isCollapsed= ...