商品呢拖拽到购物车，appendChild的剪切功能
今天来到了妙味课堂的html5课程的第2张的第8节，讲的是把商品拖拽到购物车的演示。其中有一个关于appendChild的使用，，每次拖拽都会触发这个方法，但是每次之后，却还是只有一个总价，好吧，说不清楚，一起来看程序：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽购物车</title>
<style>
*{ margin:0;padding:0;}
li{ list-style: none;}
li{ float: left;width: 200px;border:1px #000 solid;margin:10px; }
li img{ width:250px; height: 300px;}
li p,
#div1 p{ border-bottom: 1px dashed #000;} #div1 { width:900px;height:400px;border:1px #000 solid; clear:both;}
#div1 .box1{ width:left;width:200px;}
#div1 .box2{ width:left;width:200px;}
#div1 .box3{ width:left;width:200px;}
#div1 span{ margin-left:30px;} #allMoney{float:right; font-size:28px;} </style>
</head>
<body>
<ul>
<li draggable="true">
<img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt="">
<p>zol商品1</p>
<p>32.5</p>
</li>
<li draggable="true">
<img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt="">
<p>zol商品2</p>
<p>32.5</p>
</li>
<li draggable="true">
<img src="http://2a.zol-img.com.cn/article/11_120x90/742/liyoKyAnvblM.jpg" alt="">
<p>zol商品3</p>
<p>32.5</p>
</li>
</ul>
<div id="div1">
<!--<p>
<span class="box1">1</span>
<span class="box2">商品1</span>
<span class="box3">45</span>
</p>
<p>
<span class="box1">2</span>
<span class="box2">商品2</span>
<span class="box3">45</span>
</p>
<p>
<span class="box1">3</span>
<span class="box2">商品3</span>
<span class="box3">45</span>
</p>
<div id="allMoney">90元</div>
-->
</div> <script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var obj = {};
var allMoney = null;
var sum = 0;
oDiv = document.getElementById('div1');
for(var i=0,max=aLi.length;i<max;i++){
aLi[i].ondragstart = function(ev){
var aP = this.getElementsByTagName('p');
//alert(aP.length);
ev.dataTransfer.setData('title',aP[0].innerHTML);
ev.dataTransfer.setData('money',aP[1].innerHTML);
ev.dataTransfer.setDragImage(this,0,0);
//ev.preventDefault();//阻止默认事件
};
}
oDiv.ondragover = function(ev){
ev.preventDefault();//阻止默认事件
};
oDiv.ondrop = function(ev){
ev.preventDefault();//阻止默认事件
var title = ev.dataTransfer.getData('title');
var money = ev.dataTransfer.getData('money');
if(!obj[title]){
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = title;
oP.appendChild(oSpan);
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = money;
oP.appendChild(oSpan); oDiv.appendChild(oP); obj[title] = true; }else{
var box1 = document.getElementsByClassName('box1');
var box2 = document.getElementsByClassName('box2');
for(var i=0,max = box2.length;i<max;i++){
if(box2[i].innerHTML == title){
box1[i].innerHTML = parseInt(box1[i].innerHTML)+1;
}
}
}
if(!allMoney){
allMoney = document.createElement('div');
allMoney.id = 'allMoney';
}
sum += Number(money);
allMoney.innerHTML = sum+'元';
oDiv.appendChild(allMoney);//apendChild的剪切功能 }; }; </script>
</body>
</html>
商品呢拖拽到购物车，appendChild的剪切功能的更多相关文章
- 用H5自带拖拽做出购物车效果的作业题
效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出 ...
- C# 图片缩放，拖拽后保存成图片的功能
窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...
- 实现el-dialog的拖拽，全屏，缩小功能
基于el-dialog, 封装了一下.,实在懒得写,所以直接把代码 粘出来了 大概粘了一下效果.自己体会把. 组件使用 <el-dialog v-dialogDrag ref="xhz ...
- JavaScript实现图片拖拽、粘贴上传
前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...
- android Viewpager HorizontalScrollView 实现分页栏拖拽
源码:http://files.cnblogs.com/android100/ViewPaperDemo.rar首先我们先看一个效果: 前两个是网易的,它做的title不能拖拽,.不过点击动画效果挺 ...
- 从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中
1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...
- Javascript实现鼠标框选元素后拖拽被框选的元素
之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载
- Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理
今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...
- 【WPF】拖拽ListBox中的Item
整理了两个关于WPF拖拽ListBox中的Item的功能.项目地址 https://github.com/Guxin233/WPF-DragItemInListBox 需求一: 两个ListBox,拖 ...
随机推荐
- VMare安装及虚拟机的安装
VMware安装 1.下载安装包安装 2.安装虚拟机 常用命令
df -B[G,M,K]查看磁盘剩余空间 free -mh查看内存 netstat -ntlp查看当前监听的网络端口 mount -t auto /dev/cdrom /media/cdrom挂载cd ...
- 后端分页神器，mybatis pagehelper 在SSM与springboot项目中的使用
mybatis pagehelper想必大家都耳熟能详了,是java后端用于做分页查询时一款非常好用的分页插件,同时也被人们称为mybatis三剑客之一,下面 就给大家讲讲如何在SSM项目和sprin ...
- 如和针对CPU时间百分比，Mem使用bytes,以及Network RecvBytes/SendBytes指标性能压测数据可视化
设计思路:通过jmeter5.1压测获取cpu,Mem,Network的压测指标数据利用pandas+openpyxl进行数据可视化: 涉及添加jar包:下载地址:https://files.cnbl ...
- C#应用程序部署到集群若干问题
1. MemoryCache中的缓存在集群中的每个节点不能同步 解决方案: A. 将缓存内容迁移到系统外部的Redis缓存 B. 在使用MemoryCache的时候设置过期时间(当对数据同步要求不是那 ...
- 安装ipython[win/linux]
首先以win7 64位系统, python2.7.9为例,linux见底部 1.下载材料http://files.cnblogs.com/files/smileyes/ipython-win64.z ...
- 1.3 使用jmeter进行http接口测试
来源: http://www.cnblogs.com/alisapan/p/6150309.html 此篇纯是搬运记载.. 一.测试需求描述 1. 本次测试的接口为http服务端接口 2. 接口的 ...
- Spring bean继承
Bean 定义继承 bean 定义可以包含很多的配置信息,包括构造函数的参数,属性值,容器的具体信息例如初始化方法,静态工厂方法名,等等. 子 bean 的定义继承父定义的配置数据.子定义可以根据需要 ...