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 的拖拽.不支持拖拽改变顺序,感 ...
随机推荐
- android.content.res.Resources$NotFoundException: String resource ID #0x1
之前忘了记录这个错误,今天又遇到了.唉,人不能纵容自己犯懒,遂记录之. 错误:android.content.res.Resources$NotFoundException: String resou ...
- 上传文件出错：org.apache.commons.fileupload.FileUploadBase$IOFileUploadException: Processing of multipart/form-data request failed. Stream ended unexpectedly
最近做一个web项目中有上传文件的功能,已经写出并在本地和部署到服务器上测试了好几个文件上传都没问题(我用的是tomcat).后来又上传了一个700多K的文件(前边的都是不足600K的,并且这个wor ...
- Kryo 为什么比 Hessian 快
Kryo 是一个快速高效的Java对象图形序列化框架,它原生支持java,且在java的序列化上甚至优于google著名的序列化框架protobuf.由于 protobuf需要编写Schema文件(. ...
- 转载-KMP算法前缀数组优雅实现
转自:http://www.cnblogs.com/10jschen/archive/2012/08/21/2648451.html 我们在一个母字符串中查找一个子字符串有很多方法.KMP是一种最常见 ...
- Robotium 系列（2） - 简单介绍Monkey和MonkeyRunner
除了Robotium,Android还有其他的自动化测试方法,比如Monkey和MonkeyRunner. 这里就做一个简单的介绍和使用方法. 本文提纲: 1. Android SDK以及SDK中的工 ...
- Ubuntu 12.04 安装Scrapy爬虫框架
转自:http://www.cnblogs.com/HelloPython/ 亲测有效 根据Scrapy安装指南(http://doc.scrapy.org/en/latest/intro/insta ...
- leetcode@ [129] Sum Root to Leaf Numbers (DFS)
https://leetcode.com/problems/sum-root-to-leaf-numbers/ Given a binary tree containing digits from 0 ...
- 问题-Tbutton(sender) 与 (sender as Tbutton) 等价吗？
问题:Tbutton(sender) 与 (sender as Tbutton) 等价吗? 答: 1. Sender As TButton时delphi做类型检查. 比如: var frm:TFo ...
- [OC Foundation框架 - 17] copy语法
一个对象使用copy或mutableCopy方法可以创建对象的副本 1.copy 需要实现NSCopying协议 创建出来的是不可变副本,如NSString, NSArray, NSDictionar ...
- C#- Winform调用BAT例子
前段时间在工作的时候需要用到,百度了好久后找,可是找到了又希望调用的时候窗体不要显示出来. proc.StartInfo.CreateNoWindow = true; proc.Start ...