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 的拖拽.不支持拖拽改变顺序,感 ...
随机推荐
- Button 自定义（一）-shape
需求:自定义Button,使用系统自定义Shape: 效果图: 1.默认状态 2.选中状态 实现分析: 1.目录结构: 代码实现: 1.button_normal.xml <?xml versi ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]PrI.6.1
Given a basis $U=(u_1,\cdots,u_n)$ not necessarily orthonormal, in $\scrH$, how would you compute th ...
- 基于kryonet的RPC，使用kryo进行序列化
Kryo是一个序列化框架. Kryonet是一个基于kryo的RPC框架,它实现了一套高效简洁的API,它通过NIO实现了TCP和UDP通讯,目前还不支持Http. 自己写了一个测试代码,运行了下,感 ...
- extjs分组查询
<script type="text/jscript"> var grid; Ext.onReady(function () { Ext.QuickTips.init( ...
- Zabbix探索：Proxy没有回传任何数据
因为Zabbix使用Puppet搭建的,实际上是通过脚本安装的,为了偷懒,将脚本都写一块去了,后来发现Proxy的配置和Zabbix的配置不同,又偷懒一次,复制了一下,但是为了调整脚本使用的便捷性,将 ...
- ubuntu安装和卸载软件命令
ubuntu安装和卸载软件命令 Ubuntu软件安装与删除相关命令 安装软件 命令: apt-get install softname1 softname2 softname3…… 卸载软件 命令: ...
- 50道经典的JAVA编程题 （16-20）
50道经典的JAVA编程题 (16-20),用了快一个下午来做这10道题了,整理博客的时间貌似大于编程的时间啊..哈哈 [程序16]Nine.java 题目:输出9*9口诀. 1.程序分析:分行与列考 ...
- 2016多校第六场题解（hdu5793&hdu5794&hdu5795&hdu5800&hdu5802）
这场就做出一道题,怎么会有窝这么辣鸡的人呢? 1001 A Boring Question(hdu 5793) 很复杂的公式,打表找的规律,最后是m^0+m^1+...+m^n,题解直接是(m^(n+ ...
- Spring配置MyBatis
1.MyBatis配置文件(mybatis-config) <?xml version="1.0" encoding="UTF-8"?> <! ...
- IAR stm8带库的工程模板
下载:http://pan.baidu.com/share/link?shareid=2243555626&uk=2483252218