今天来到了妙味课堂的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的剪切功能的更多相关文章

  1. 用H5自带拖拽做出购物车效果的作业题

    效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出 ...

  2. C# 图片缩放，拖拽后保存成图片的功能

    窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...

  3. 实现el-dialog的拖拽，全屏，缩小功能

    基于el-dialog, 封装了一下.,实在懒得写,所以直接把代码 粘出来了 大概粘了一下效果.自己体会把. 组件使用 <el-dialog v-dialogDrag ref="xhz ...

  4. JavaScript实现图片拖拽、粘贴上传

    前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. ...

  5. android Viewpager HorizontalScrollView 实现分页栏拖拽

    源码:http://files.cnblogs.com/android100/ViewPaperDemo.rar首先我们先看一个效果:  前两个是网易的,它做的title不能拖拽,.不过点击动画效果挺 ...

  6. 从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中

    1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...

  7. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  8. Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

    今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能 上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <di ...

  9. 【WPF】拖拽ListBox中的Item

    整理了两个关于WPF拖拽ListBox中的Item的功能.项目地址 https://github.com/Guxin233/WPF-DragItemInListBox 需求一: 两个ListBox,拖 ...

随机推荐

  1. logits的用法和此类标注的作用，已经再最后一层加了映射了就不需要再加入了

    logits的用法和此类标注的作用,已经再最后一层加了映射了就不需要再加入了 待办 PyTorch(tensorflow类似)的损失函数中,有一个(类)损失函数名字中带了with_logits. 而这 ...

  2. php设计模式之多态实例代码

    <?php header("Content-type:text/html;charset=utf-8"); /** * 虎 */ abstract class Tiger { ...

  3. 题解【2.23考试T2】str

    2. str [题目描述] 这是一道传统题,源代码的文件名为 str.cpp/c/pas. 构造 n 个 01 字符串 S1...Sn,使得对于任意 i≠j,Si 不是 Sj 的前缀.在最小化串长和的 ...

  4. Django_MTV和虚拟环境

    1. MVT模型 2. 虚拟环境 """ 1.安装虚拟环境的命令: 1)sudo pip install virtualenv #安装虚拟环境 2)sudo pip in ...

  5. 传奇装备锻造升级UPGRADEITEMEX功能详解

    装备升级功能可以指定升级物品及属性,按指定机率得到结果.需要升级的装备物品必须放在身上.命令格式UPGRADEITEMEX 物品位置(0-12) 属性位置(0-14) 成功机率(0-100) 点数机率 ...

  6. C#中通过SendARP读取MAC地址

    C#中通过SendARP读取MAC地址: using System.Runtime.InteropServices; publicstaticstring GetMacBySendARP(string ...

  7. IIS 无法读取配置节"system.web.extensions",因为它缺少节声明

    IIS 无法读取配置节"system.web.extensions",因为它缺少节声明 先安装ASP.NET 4.0  然后: 今天在本地安装iis,搭建网站,应用程序的时候报错下 ...

  8. Java - 判断字符串是否是回文

    首先,回文是指类似于“12345”,“abcdcba”的形式,即正念和反念都是一样的字符串 判断字符串是否是回文,这边介绍3种办法 将字符串翻转,判断翻转后的字符串和原字符串是否相等 public s ...

  9. AcWing 853. 有边数限制的最短路 bellman-ford 结构体

    //存在负权值 处理负环 //如果能求出来 一般是不存在负权回路 //如果有负回路 那最小距离可能是负无穷 #include <cstring> #include <iostream ...

  10. vue 对象数组中，相邻的且相同类型和内容的数据合并，重组新的数组对象

    在项目中,有时候会遇到一些需求,比如行程安排,或者考勤状态.后台返回的获取是这一周的每一天的状态,但是我们前端需求显示就是要把相邻的且状态相同的数据进行合并,所以我们就要重新组合返回的数据.如下所示: ...