今天来到了妙味课堂的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++-POJ1017-Packets

    贪心算法,思路见代码 本来想搜索,结果有O(1)的算法,我佛了 其实每一种6x6的方案可以打表预处理,然后dp or search 但是既然可以贪心何乐而不为呢? #include <set&g ...

  2. 题解【SP1716】GSS3 - Can you answer these queries III

    题目描述 You are given a sequence \(A\) of \(N (N <= 50000)\) integers between \(-10000\) and \(10000 ...

  3. selenium-JavaScript的处理

    JavaScript的处理 在自动化过程中,遇到js处理的元素,需要使用js语言对元素进行操作,例如,滑动到浏览器的底部或者顶部,时间控件的处理,元素可见不可见以及富文本的处理等,都需要js语言的支持 ...

  4. EQ实现

    原理参考: https://www.cnblogs.com/fellow1988/p/9189338.html https://www.cnblogs.com/fellow1988/p/9136346 ...

  5. 第一个vi

    选择——VI 在前面板选择波形图表 在程序框图中选择while循环,框住波形图 在编程-数值中选择随机数,连接随机数与波形图 在编程-定时子选项卡中选择--等待下一个整数倍,在数值中选择常量选项,数值 ...

  6. windows CMakeLists.txt

    在windows下写好CMakeLists.txt,然后配合cmake-gui使用. CMakeLists.txt写的不够好,后期优化,以下仅供参考: # set(OpenCV_DIR D:/Prog ...

  7. 每日扫盲（一）：java的rmi

    JAVA RMI 原理和使用浅析 本地对象调用 我们先看看本地对象方法的调用: ObjectClass objectA = new ObjectClass(); String retn = objec ...

  8. java爬虫出现java.lang.IllegalArgumentException: Illegal character in path at index 31

    url地址中出现了空格,使用trim()函数去除空格就好了

  9. dist-packages vs site-packages

    dist-packages 和 site-packages的区别 Reference: https://stackoverflow.com/questions/9387928/whats-the-di ...

  10. Plastic Bottle Manufacturer -Composition And Process Of Plastic Bottles

    Plastic bottles are mainly made of materials such as polyethylene or polypropylene and adding a vari ...