h5拖放-拖拽购物车
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
/*reset*/
.productList{
zoom: 1;
}
.productList:after{
display: block;
content: '';
clear: both;
}
li{
float: left;
border: 1px solid grey;
margin: 10px;
}
img{
border: 1px solid darkslategray;
}
p{
border-bottom: dashed 1px grey;
}
.checkout{
width: 800px;
height: 400px;
border: 1px solid grey;
}
.p{
height: 30px;
line-height: 30px;
}
.span{
margin-right: 29%;
}
.all{
float: right;
}
</style>
<script>
onload= function () {
//获取
var aLi=document.getElementsByTagName('li');
var oCheckout=document.getElementById('checkout');
//创建json
var obj={};
//声明变量，初始化
var iNum=0;
var allMoney;
//拖拽商品
for(var i= 0,len=aLi.length;i<len;i++){
aLi[i].ondragstart= function (ev) {
ev=ev||event;
//存数据
var aP=this.getElementsByTagName('p');
ev.dataTransfer.setData('title',aP[0].innerHTML);
ev.dataTransfer.setData('money',aP[1].innerHTML);
//拖拽图片
ev.dataTransfer.setDragImage(this,0,0); //setDragimage（拖拽的图片，拖拽时鼠标光标所在图片的x坐标，拖拽时鼠标光标所在图片的y坐标）
}
}
//兼容ff
oCheckout.ondragover= function (ev) {
ev=ev||event;
ev.preventDefault();
};
//放入购物车
oCheckout.ondrop= function (ev) {
//阻止浏览器的默认行为：将文件放到浏览器中会自动打开
ev=ev||event;
ev.preventDefault();
//取商品数据
var oTitle=ev.dataTransfer.getData('title');
var oMoney=ev.dataTransfer.getData('money');
//判断在购物车中是否已经存在此商品
if(!obj[oTitle]){ //购物车中不存在此商品
//动态创建p
var oP=document.createElement('p');
oP.className='p';
//分别动态创建商品的三个数据
var oSpan=document.createElement('span');
oSpan.className='span num';
oSpan.innerHTML=1;
oP.appendChild(oSpan);
var oSpan=document.createElement('span');
oSpan.className='span topic';
oSpan.innerHTML=oTitle;
oP.appendChild(oSpan);
var oSpan=document.createElement('span');
oSpan.className='span';
oSpan.innerHTML=oMoney;
oP.appendChild(oSpan);
this.appendChild(oP);
//标记为购物车中已经存在此商品
obj[oTitle]=1;
}else{ //购物车中已经存在此商品
//获取
var oNum=document.getElementsByClassName('num');
var oTopic=document.getElementsByClassName('topic');
for(var i= 0,len=oNum.length;i<len;i++){
//寻找将要放入购物车的商品在购物车中已经存在的位置
if(oTopic[i].innerHTML==oTitle){
//数量加一
//记得有单位，要用parsetInt去掉
oNum[i].innerHTML=parseInt(oNum[i].innerHTML)+1;
}
}
}
//要使用此种判断方法，就要实现声明但不实例化，这样在js中符合判断要求
//首次创建，创建后即已经实例化，不再为空，则allMoney为true
if(!allMoney){
allMoney=document.createElement('div');
allMoney.className='all';
}
//结算所有商品
iNum+=parseInt(oMoney);
//单位
allMoney.innerHTML=iNum+'￥';
this.appendChild(allMoney);
}
}
</script>
</head>
<body>
<ul class="productList">
<li draggable="true">
<img src="data:image/lover20.JPG" alt="" width="200" height="300"/>
<p>小婆婆</p>
<p>10￥</p>
</li>
<li draggable="true">
<img src="data:image/lover20.JPG" alt="" width="200" height="300"/>
<p>大婆婆</p>
<p>10￥</p>
</li>
<li draggable="true">
<img src="data:image/lover20.JPG" alt="" width="200" height="300"/>
<p>肥婆婆</p>
<p>10￥</p>
</li>
<li draggable="true">
<img src="data:image/lover20.JPG" alt="" width="200" height="300"/>
<p>中婆婆</p>
<p>10￥</p>
</li>
</ul>
<div class="checkout" id="checkout">
<!-- <p>
<span>1</span>
<span>小婆婆</span>
<span>10￥</span>
</p>
<p>
<span>1</span>
<span>小婆婆</span>
<span>10￥</span>
</p>
<p>
<span>1</span>
<span>小婆婆</span>
<span>10￥</span>
</p>
<p>
<span>1</span>
<span>小婆婆</span>
<span>10￥</span>
</p>
<div class="all">
40￥
</div>-->
</div>
</body>
</html>
h5拖放-拖拽购物车的更多相关文章
- h5原生拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H5原生拖拽事件
使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 自制一个H5图片拖拽、裁剪插件（原生JS）
前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...
- PCB Winform中的WebBrowser扩展拖放(拖拽)功能 实现方法
我们在Winform支持网页通常增加WebBrowser控件实现,相当于内嵌浏览器浏览网页使用, 而此WebBrowser默认情况是文件拖入功能是不支持的, 如何才能支持呢.在这里介绍如何实现方法 一 ...
- H5之拖拽
步骤: 1.为将要拖拽的元素设置允许拖拽,并赋予dragstart事件将其id转换成数据保存: 2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置,并赋予drop事件进行元素的 ...
- H5 拖拽,一个函数搞定,直接指定对象设置可拖拽
页面上,弹个小窗体,想让它可以拖拽,又不想 加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的 拖拽 在 HTML5 中,拖放是标准的一部分,任何元 ...
- h5拖拽上传图片
h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...
- 商品呢拖拽到购物车，appendChild的剪切功能
今天来到了妙味课堂的html5课程的第2张的第8节,讲的是把商品拖拽到购物车的演示.其中有一个关于appendChild的使用,,每次拖拽都会触发这个方法,但是每次之后,却还是只有一个总价,好吧,说不 ...
- React 实现拖拽功能
实现效果:(可戳 https://codepen.io/wenr/pen/EGEQxp 查看) 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感 ...
随机推荐
- CSS遮罩——如何在CSS中使用遮罩
Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...
- ZOJ 2283 Challenge of Wisdom
题意:在一个n * m的地图里,有p个宝藏,每次只能向横纵坐标增加的方向走,问最少走几次能把宝藏都拿走. 解法:按横坐标排序,纵坐标的一个不下降子序列就是一条合法路径,要求多少条不下降子序列可以覆盖所 ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.5.5
Show that the inner product $$\bex \sef{x_1\vee \cdots \vee x_k,y_1\vee \cdots\vee y_k} \eex$$ is eq ...
- windows和linux间互传文件
方法1:Xshell传输文件 用rz,sz命令在xshell传输文件 很好用,然后有时候想在windows和linux上传或下载某个文件,其实有个很简单的方法就是rz,sz 首先你的Ubuntu需要安 ...
- js，css压缩工具
常见的js压缩工具: js commpress: 运行平台:windows系统, 优点:能自动压缩: 缺点:不能拖动文件压缩:只支持windows平台: s.press 运行平台:mac ox系统 优 ...
- 【DOM】2.闭包
1.什么是闭包? 函数嵌套函数 内部函数可以引用外部函数的参数和变量 参数和变量不会被JS中的垃圾回收机制 所收回 2.闭包有啥好处?应用在哪? ①希望一个变量长期驻扎在内存中 ②避免全局变量的污染 ...
- ubuntu安装和卸载软件命令
ubuntu安装和卸载软件命令 Ubuntu软件安装与删除相关命令 安装软件 命令: apt-get install softname1 softname2 softname3…… 卸载软件 命令: ...
- 2014年国人开发的最热门的.NET开源项目 TOP 25
原文地址:http://www.cnphp6.com/archives/72213 1 奎宇工作室 / DotNetCodes C# 一些常用的功能性代码,可以减少许多开发时间,而且类与类之间没有什么 ...
- 【转载】C内存对齐
http://blog.csdn.net/hbuxiaofei/article/details/9491953 当你看到这个标题,仍想往下读的时候说明你已经开始关注数据在内存存储问题了. 好吧,下面先 ...
- HDU-4647 Another Graph Game 贪心,博弈
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4647 注意这题两人的决策是想要使得自己的分数与对方的差值最大.. 注意到数据范围,显然是贪心之类的,如 ...