HTML5拖放加入购物车
H5拖放事件巩固实例:
1、简单布局一下,商品信息放入一个ul中;div为购物车,后续会创建元素
<ul>
<li draggable="true">
<img src="img1.jpg" />
<p>javascript语言精粹</p>
<p>¥</p>
</li>
<li draggable="true">
<img src="img2.jpg" />
<p>javascript权威指南</p>
<p>¥</p>
</li>
<li draggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>¥</p>
</li>
<li draggable="true">
<img src="img4.jpg" />
<p>DOM编程艺术</p>
<p>¥</p>
</li>
</ul>
<div id="div1"></div>
2、css样式:
<style type="text/css">
*{
margin:;
padding:;
}
li{
list-style: none;
width: 200px;
margin: 10px;
border: 1px solid #;
float: left;
}
li img{
width: 200px;
}
li p{
border-bottom: 1px dashed #;
height: 20px;
}
div{
margin: 10px;
clear: both;
width: 600px;
height: 300px;
border: 1px solid #;
}
div p{
height: 20px;
border-bottom: 1px dashed #;
}
.box1{
width: 200px;
float: left;
}
.box2{
width: 200px;
float: left;
}
.box3{
width: 200px;
float: right;
}
#allmoney{
float: right;
border-bottom: none;
}
</style>
3、js部分首先是ondragstart事件,用for循环遍历li标签,然后用拖放事件中的dataTransfer下的setData属性将商品的名称和价格存起来,以便后续加入购物车时获取:
for(var i=; i<aLi.length; i++){ aLi[i].ondragstart = function(ev){ var oP = this.getElementsByTagName('p'); ev.dataTransfer.setData('title',oP[].innerHTML);
ev.dataTransfer.setData('money',oP[].innerHTML); ev.dataTransfer.setDragImage(this,,); }
}
4、触发ondrop事件需在ondragover事件里阻止默认事件;通过getData获取到商品的名称和价格;此处加if判断是为了添加重复的商品到购物车的时候只在原来的商品的基础上增加数量即可,提前创建一个json:var obj = {},利用商品的标题是唯一的这一点来判断,当创建一个p标签后,obj[otitle]=1,再次添加商品时条件!obj[otitle]为false,执行else部分;else部分是增加商品的数量,获取购物车里面的所有的class为box2的span标签,遍历每个元素,判断当其innerHTML值和新拖进来的商品名称otitle相等时,该商品的数量+1,注意:span1的数量需要parseInt取整才能相加。
oDiv.ondragover = function( ev ){
ev.preventDefault();
} oDiv.ondrop = function( ev ){
ev.preventDefault(); var otitle = ev.dataTransfer.getData('title');
var omoney = ev.dataTransfer.getData('money'); if( !obj[otitle] ){
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = ;
oP.appendChild(oSpan); var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = otitle;
oP.appendChild(oSpan); var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = omoney;
oP.appendChild(oSpan);
oDiv.appendChild(oP); obj[otitle] = ;
}else{ var Span1 =document.getElementsByClassName('box1');
var Span2 = document.getElementsByClassName('box2'); for(var i=; i<Span2.length; i++){
if( Span2[i].innerHTML == otitle ){
Span1[i].innerHTML = parseInt(Span1[i].innerHTML) + ;
}
}
}
5、最后是商品的总价的计算
if(!allmoney){ //提前定义全局变量 var allmoney = null;
allmoney = document.createElement('p'); //注意这里前面没有加var 不是变量
allmoney.id = 'allmoney';
} iNum += parseInt(omoney); //提前定义全局变量 var iNum = 0; allmoney.innerHTML = iNum + '¥'; oDiv.appendChild(allmoney);
HTML5拖放加入购物车的更多相关文章
- html5 拖放到购物车
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5拖放(drag and drop)与plupload的懒人上传
HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...
- HTML5 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...
- HTML5拖放API
拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...
- HTML5拖放
HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...
- HTML5 拖放及排序的简单实现
HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...
- HTML5 拖放(Drag 和 Drop)功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
- localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...
- 【Demo】HTML5拖放--简单demo
用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后------- 实现代码: <!DOCTYPE html> ...
随机推荐
- 可持久化Trie树初步
可持久化Trie树和可持久化线段树很像,依次插入信息,通过减法来进行历史版本查询. 2015年11月27日 bzoj3261 最大异或和 我们需要计算 a[p] xor a[p+1] xor ... ...
- js jqery判断checkbox是否选中,全选,取消全选,反选,选择奇数偶数项
// 一,判断选中 // js var ischecked2 = function(){ // this.checked == true $(document.getElementsByTagName ...
- Oracle安装卸载
http://study.163.com/course/courseLearn.htm?courseId=932016#/learn/video?lessonId=1115367&course ...
- 安卓handler、thread实现异步任务
[转]http://blog.csdn.net/lanpy88/article/details/6659630 一Handler的定义: 主要接受子线程发送的数据, 并用此数据配合主线程更新UI. ...
- UVa 507 - Jill Rides Again
题目大意:最大和子序列问题.由于具有最大和的子序列具有一下性质:第一项不为负数,并且从第一项开始累加,中间不会有和出现负数,因为一旦有负数我们可以抛弃前边的部分以得到更大的子序列和,这将会产生矛盾. ...
- ubuntu下Xmodmap映射Esc和Ctrl_L
一般来说,用Vim.Emacs的人,都会有做键盘映射的想法 我当然也是,开始学习Vim的时候,就觉得,把Esc键放在左上角, 是一件很SB的事情,稍微大一点的键盘,手指必须要离开位置才能按到Esc键, ...
- HTML/CSS/JavaScript学习总结(转)
HTML 网站开发的主要原则是: – 用标签元素HTML描述网页的内容结构: – 用CSS描述网页的排版布局: – 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序 H ...
- jQuery 的 ready 函数是如何工作的?(源码分析)
如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数. 问题来啦,我们的页面什么时候准备好了呢? 1. onload 事件 最基本的处理方式就是页面 ...
- Eclipse中javascript文件 clg 变为console.log();
Eclipse中javascript文件 clg 变为console.log(); window>preferance>JavaScript>Editor>Templates ...
- PHP Memcached 实现简单数据库缓存
Memcache常用方法 Memcache::add — 添加一个值,如果已经存在,则返回false Memcache::addServer — 添加一个可供使用的服务器地址 Memcache::cl ...