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 的拖拽.不支持拖拽改变顺序,感 ...
随机推荐
- hbase分页查询
为了广大技术爱好者学习netty,在这里帮新浪微博@nettying宣传下他出版的新书 <netty权威指南>@nettying兄在华为NIO实践多年,这本书是他的技术和经验的一个结晶.N ...
- How to cancel parallel loops in .NET C# z
Cancellation token Parallel options CancellationTokenSource cancellationTokenSource = new Cancellati ...
- Clone PDB from same CDB
Clone PDB 用途: 1.用于测试,从生产系统clone数据来进行测试 2.诊断性能问题 Clone PDB Using OMF from same CDB 环境信息: DB Version ...
- [selenium webdriver Java]检查元素是否存在
Selenium WebDriver没有实现Selenium RC的isElementPresent()方法来检查页面上的元素是否存在. 在WebDriver中封装一个类似的方法,如下: public ...
- 【转】ExcelHelper类，用npoi读取Excel文档
//------------------------------------------------------------------------------------- // All Right ...
- C/C++：拷贝构造函数
拷贝构造函数是一种特殊的构造函数,因为它也是用来构造对象的.它具有构造函数的所有特性.拷贝构造函数的作用是用一个已经存在的对象去初始化另一个对象,这两个对象的类类型应该是一样的.定义拷贝构造函数的形式 ...
- 使用 EasyBCD 安装Ubuntu 14.04 Error 15: file not found错误的解决方法
今天安装Window7 和 Ubuntu 14.04 双系统时,出现如下异常,记录一下. 安装过程是参考 http://www.linuxidc.com/Linux/2014-04/100369.ht ...
- 【转载】setjmp和longjmp函数使用详解
[说明]本文上半部分转载自 wykwdy007 的转载文章 http://blog.csdn.net/wykwdy007/article/details/6535322 --------------- ...
- Google的IP地址一览表,加上代理服务器
Bulgaria 93.123.23.1 93.123.23.2 93.123.23.3 93.123.23.4 93.123.23.5 93.123.23.6 93.123.23.7 93.123. ...
- Fun with layers
Fun with layers 这篇文章的有些内容很奇怪,我根本就没有这种现象,所以暂时就这样吧 In this post, I’ll explain how to add a border, rou ...