用H5自带拖拽做出购物车效果的作业题
效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量。如果拖放有重复,只是在div里面让物品的数量加1,最后计算出所有拖放物品的价格之和,并且显示在div里面,利用appendChild的的剪贴行,保证在计算价格的时候总是在所计算价格的物品的下一行。
下面是代码:
HTML+CSS布局
<ul id="ul1">
<li draggable="true">
<img src="imgs/1.jpg" >
<p>物品1</p>
<p>50¥</p>
</li>
<li draggable="true">
<img src="imgs/2.jpg" >
<p>物品2</p>
<p>40¥</p>
</li>
<li draggable="true">
<img src="imgs/3.jpg" >
<p>物品3</p>
<p>30¥</p>
</li>
<li draggable="true">
<img src="imgs/4.jpg" >
<p>物品4</p>
<p>20¥</p>
</li>
</ul>
<div id="div1">
<p>
<span class="box2">物品名</span>
<span class="box3">物品个数</span>
<span class="box1">物品价格</span>
</p>
*{margin:; padding:;}
li{list-style: none}
#ul1 li{float: left;margin: auto 5px; border: 1px solid #000}
#ul1 img{width:270px;height:400px;}
#ul1 li p{ text-align:center; border-bottom: 1px solid #000 }
#div1{clear: both;border:1px solid ;width:1125px;height: 200px;position: relative}
#div1 p{border:1px dashed #ccc}
#div1 p span{ margin-left: 200px}
.allMoney{float: right}
下面是JS:
物体拖思路,首先是拖拽物体的ondragstart事件下,使用DataTransfer对象过滤被拖动元素。利用DataTransfer对象获取数据值。
var oLi=document.getElementsByTagName('li');
var oDiv=document.getElementById('div1');
var obj={};//利用json查重
var num=0;//计算总钱数
var allMoney=null;
var i=0;
for(i=0;i<oLi.length;i++){
oLi[i].ondragstart=function(ev){
// this指的是oLi[i],
var oP=this.getElementsByTagName('p');
ev.dataTransfer.setData('name',oP[0].innerHTML);
ev.dataTransfer.setData('price',oP[1].innerHTML);
ev.dataTransfer.setDragImage(this,0,0);//让拖动照片里选中li标签里面的所有内容 };
}
然后是物体放:放的时候应当是创建标签,并设置标签的内容分别为name的值的price的值, countMoney(),是计算总钱数的函数。
oDiv.ondragover=function(){
//阻止默认事件,否则无法ondrop
return false
};
oDiv.ondrop=function(ev){
//在ondrop事件中getData
var name=ev.dataTransfer.getData('name');
var price=ev.dataTransfer.getData('price');
//判断内容是否一致
//原理:建造一个JSON格式,JSON对象的属性没有name的属性(obj[name]!=1),继续造标签,
//放odiv里面,并设置obj[name]=1,否则box1的innerHTML+1,原理在else那边写着。
if(obj[name]!=1){
//统一生成p标签
var ap=document.createElement('p');
//先生成box2,里面盛放的是物品的名字
var aspan1=document.createElement('span');
aspan1.className='box2';
aspan1.innerHTML=name;
//再生成box3,里面盛放的是物品的价格
var aspan3=document.createElement('span');
aspan3.className='box3';
aspan3.innerHTML=price;
//最后生成box1,里面盛放的是物品的个数
var aspan2=document.createElement('span');
aspan2.className='box1';
aspan2.innerHTML=1;
//把aspan加到生的p标签里面
ap.appendChild(aspan1);
ap.appendChild(aspan2);
ap.appendChild(aspan3);
//把p标签都加在div里面
oDiv.appendChild(ap);
//不重复后,把obj[name]的值设为1
obj[name]=1;
countMoney();
return false;
}
else{
//有重复的物品,他们物品个数会重复加1
//原理:如果是重复的,那么先判断重复的box2的内容和name是否一致,box2里面的
//内容放的是物品的名字为什么要用for语句遍历呢,简单的理解就是name的获取也是根据遍历得到的
//如果一致的话让box1的数值加一即可,注意box1的数值是字符串,必须要转成数值,再加一。
var oBox1=document.getElementsByClassName('box1');
var oBox2=document.getElementsByClassName('box2');
var i=0;
for(i=0;i<oBox2.length;i++){
if(oBox2[i].innerHTML==name){
oBox1[i].innerHTML=parseInt(oBox1[i].innerHTML)+1;
}
}
countMoney(); }
计算总钱数的函数,这个函数必须放在ondrop函数里面。
function countMoney(){
//如果没有allMoney的span,那么就生成一个allmoney。
if(!allMoney){
allMoney=document.createElement('div');
allMoney.className='allMoney';
}
num+=parseInt(price);
allMoney.innerHTML='合计为:'+num+'¥';
oDiv.appendChild(allMoney);
//如果有allMoney,就只能它的数值增加就行。
}
总结:我觉得这里面值得注意的有两点点,一是查重,首先是建一个空的json,然后判断json的里是否的有name这个属性,如果有,只是让其的数量的值+1,如果没有没话继续新建child,并置json[name]=1;,二是如何建一个总价格的div标签,并让其innerHTML的值为所有价格总和,这时候就有一个小技巧,就是先判断有没有先建的div标签,没有的话,建立div标签,设置className,如果有只是改变数值,本来oDiv.appendChild(allMoney);应该在if里面,但是为了让每次添加一个物品项,合计价格在物品项下面,就把其放在if外面,利用了appendChild的剪贴性。这两点是我觉得应该注意的和思考的。
这个例子就是我学H5自带拖拽事件学到的知识。
用H5自带拖拽做出购物车效果的作业题的更多相关文章
- 商品呢拖拽到购物车,appendChild的剪切功能
今天来到了妙味课堂的html5课程的第2张的第8节,讲的是把商品拖拽到购物车的演示.其中有一个关于appendChild的使用,,每次拖拽都会触发这个方法,但是每次之后,却还是只有一个总价,好吧,说不 ...
- H5中的拖拽事件
最近浏览了张鑫旭大神的基于HTML5 drag/drop模块拖动插入排序删除完整实例,感觉受益匪浅.于是将最做的demo记录下来. 首先浏览一下事件,这些事件比较好记,只要记住用在谁的身上就好了,无非 ...
- Android 可拖拽的GridView效果实现, 长按可拖拽和item实时交换
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17718579),请尊重他人的辛勤劳动成果,谢谢! 在And ...
- [ActionScript 3.0] AS3 拖拽混动效果之一
package { import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; impor ...
- JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码
效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户 ...
- 实现一个宽和高都是100像素的div可以用鼠标拖拽移动的效果
html,body{ width:100%;height:100%;margin:0px;padding:0px; } #box{ width:100px;height:100px;backgroun ...
- 仿h5拖拽
在h5中有个拖拽的声明式命令,就如html属性一样,简单强大. 而在网页上拖拽的功能还是需求很大的,所以对这方面应该去仔细了解一下. 所以仿一一下它的实现.只是仿了它的复制一份到目标容器的功能.它还有 ...
- html5拖拽实现
1.需求 做一个h5正方形的拖拽框 2.分析 使用touchstart,touchmove,touchend这3个事件实现. 需要记录的数据有三组数据,分别是下图的(x0,y0),(x1,y1),(x ...
- HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
随机推荐
- ubuntu开发机所需工具,做个记录,不断补充
文件搜索 FSearch 用了下可以, 类似windows下的Everything 或者mac的cmd+空格 地址 安装: sudo add-apt-repository ppa:christian- ...
- 牛X!看完阿里P8架构师推荐的spring三剑客,成功涨薪5k
一直以来,Spring都被Java程序员视为杀手级别的应用,是为简化Java EE应用程序的开发为目标而创建的.Spring可以做很多事情,它为企业级开发提供给了丰富的功能,但是这些功能的底层都依赖于 ...
- unity探索者之socket传输protobuf字节流(一)
版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/6974229.html 近期在做一个棋牌项目,需要用到socket传输protobu ...
- 笔记:html基础
一.HTML:超文本标记语言,是一种标签语言,不是编程语言,显示数据有双标签<body></body> 和单标签<img src=# / >, 标签大小写都可以 通 ...
- ajax、反向ajax、jsonp详解
ajax详解 什么是ajax 其实ajax已经属于老技术了,现在几乎没人不会用了,在这里主要是把底层的东西给大家分享一下,以备应对装逼的面试官. ajax即“Asynchronous Javascri ...
- golang复杂数据结构
1.数组 数组是一个由固定长度的特定类型元素组成的序列,一个数组可以由零个或多个元素组成.因为数组的长度是固定的,因此在Go语言中很少直接使用数组. 数组的每个元素可以通过索引下标来访问,索引下标的范 ...
- php使用curl来获取远程图片
本文章来介绍php使用curl来获取远程图片实现方法,有需要了解采集远程图片的朋友不防进入参考. curl要求php环境支持才行. 可以运行phpinfo()函数是否支持,一般要将php.ini中;e ...
- 如何使用SPSSAU计算耦合协调度?
什么是耦合协调度模型 耦合协调度模型用于分析事物的协调发展水平.耦合度指两个或两个以上系统之间的相互作用影响,实现协调发展的动态关联关系,可以反映系统之间的相互依赖相互制约程度.协调度指耦合相互作用关 ...
- 图数据库对比:Neo4j vs Nebula Graph vs HugeGraph
本文系腾讯云安全团队李航宇.邓昶博撰写 图数据库在挖掘黑灰团伙以及建立安全知识图谱等安全领域有着天然的优势.为了能更好的服务业务,选择一款高效并且贴合业务发展的图数据库就变得尤为关键.本文挑选了几款业 ...
- qt exe文件添加图标
Qt 怎样生成带图标的exe(转载) 一.问题描述 当我们在 Windows 下用 VS 生成 exe 程序时,如果窗口程序指定了图标,那么生成的 exe 程序便是指定的图标模样. 但是,当使用 Qt ...