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 的拖拽.不支持拖拽改变顺序,感 ...
随机推荐
- 手把手教你WEB套打程序开发
WEB套打可选方案不多,理想的更少,利用免费控件Lodop+JavaScript实现精确套打,算是较为经典的选择.这种方案其实比较简单,利用一个htm文件就可以实现模板设计过程,几乎是“空手套”式的开 ...
- 9Patch在Android平台的应用
- android布局ui
LinearLayout和RelativeLayout 属性对比 共有属性:java代码中通过btn1关联次控件android:id=”@+id/btn1″ 控件宽度android:layout_wi ...
- 制作动态链接库给opencv程序使用（使用QtCreator）
新建一个c++库项目 pro文件 #------------------------------------------------- # # Project created by QtCreator ...
- ASP.NET使用Jquery-Ajax向ashx传递参数中文出现乱码
今天遇到个问题,IE11下Jquery-Ajax向ashx传递参数中文出现乱码,但在谷歌.火狐.360等浏览器中没有乱码的问题,百度了好久最后发现使用escape()对参数值进行处理就可以了: 参考代 ...
- OpenCV - Operations on Arrays 对数组(矩阵)的一些操作
Function (函数名) Use (函数用处) add 矩阵加法,A+B的更高级形式,支持mask scaleAdd 矩阵加法,一个带有缩放因子dst(I) = scale * src1(I) + ...
- HDU-1007 Quoit Design 平面最近点对
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1007 简单裸题,测测模板,G++速度快了不少,应该是编译的时候对比C++优化了不少.. //STATU ...
- NGUI学习笔记（二）：基础笔记
精灵(Sprite).图集(Atlas)和贴图(Texture)的区别 图集:由多张小图拼合而成的一张大图,其好处是降低DrawCall的次数.减少载入内存的次数和方便管理同一类型的小图.一般图集都会 ...
- Oracle中遍历Ref Cursor示例
示例编写环境 数据库:Oracle Database 12c Enterprise Edition Release 12.1.0.1.0 - 64bit Production 登陆用户:Scott O ...
- matlab inpolygon 判断点在多边形内
如何判断一个点在多边形内部? xv= [0 3 3 0 0]; %x坐标 yv= [0 0 3 3 0];%y坐标 x=1.5; y=1.5; in=inpolygon(x,y,xv,yv) plot ...