今天来到了妙味课堂的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. C++-POJ1067-取石子游戏

    //(ak,bk)=([k*(1+sqrt(5))/2],[k*(1+sqrt(5))/2]+k)=(ak,ak+k) #include <cstdio> double sqrt5=2.2 ...

  2. 进程管理 supervisor

    背景知识: supervisor是用Python开发的一套通用的进程管理程序,能将一个普通的命令行进程变为后台daemon,并监控进程状态,异常退出时能自动重启. 它是通过fork/exec的方式把这 ...

  3. Lingo简单入门，以及对线性规划做敏感性分析设置

    Lingo中用!表示注释,注释结束用;表示,lingo不区分大小写,运行时会自动统一装换成大写 编程步骤: 1.推算出正确的模型 2.确定描述集,定义集合 3.确定变量 4.正确写出每个式子 常用函数 ...

  4. Linux - 查看静态硬件信息

    概述 查看系统的 信息 一些 相对静态 的信息 背景 一直想写, 但是没来得及整理 每次要用的时候, 都慌里慌张的到处找 这次把他记下来 环境 CentOS 7 下面有些方法, 可能是 centos ...

  5. 2019年9月2日，亲自最新JDK12.0.2和JRE1.8.0的下载和配置（64bit），被其他教程坑了几圈忍不住自己写一篇

    前因/ 新买了电脑,想在家写前端页面,看到最新版的JDK12.0.2和JRE1.8.0,就想着要用就用最新的,才对得起我的I9电脑.本人也是半生不熟,公司用的都是前辈配置好的环境,并且是JDK8很老了 ...

  6. servlet3 使用

    一 servlet类 @WebServlet() 用于注释servlet类      参数一般直接设置value外部访问名,省略value 参数类型 value            参数的值就是外部 ...

  7. Bugku-CTF分析篇-weblogic(黑客攻击了Weblogic应用，请分析攻击过程，找出Weblogic的主机名。)

    weblogic 黑客攻击了Weblogic应用,请分析攻击过程,找出Weblogic的主机名. flag格式:flag{} Tip:主机名为十六进制.  

  8. bootstrap的网格控制

    <div class="container-fluid row m-0 p-0"> <div class="col-2 border"> ...

  9. 主席树 hdu 4348

    题意:有一个由n个数组成的序列,有4中操作: 1.C l r d [l,r]这段区间都加上d 2.Q l r 询问[l,r]这段区间的和 3.H l r t 询问之前t时间[l,r]的区间和 4.B ...

  10. CSS--box

    width is content width height is content height set margin and padding zero leads box to the same wi ...