今天来到了妙味课堂的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. Django_模板

    1. 模板变量 小插曲 2. 模板点语法和标签 2.1 获取属性 2.2 调用方法 2.3 获取索引 2.4 获取字典中的值 3. 模板中的标签 3.1 if 3.2 for 3.3 注释 乘除 整除 ...

  2. DuPan不限速教程

    准备: 1.一个百度网盘链接 2.一个可以切换UA的浏览器, 手机版:via,极速浏览器,Kiwi浏览器(推荐)电脑版:未知 3.你的手和脑子

  3. 09day vi命令详解

    vi有三种模式(互相切换) 1. 命令模式 2. 插入模式(编辑模式) 3. 低行模式 三种模式的切换方法: 使用技巧 vi 文件信息 i --- 进入编辑模式 esc --- 退出编辑模式 :wq ...

  4. Linux实现树莓派3B的国密SM9算法交叉编译——（三）国密SM9算法实现

    先参考这篇文章 Linux实现树莓派3B的国密SM9算法交叉编译——(二)miracl库的测试与静态库的生成 进行miracl库的交叉编译测试,并生成miracl静态链接库. 这篇文章主要介绍基于mi ...

  5. 题解【洛谷P2279】[HNOI2003]消防局的设立

    题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有\(n\)个基地.起初为了节约材料,人类只修建了\(n-1\)条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成 ...

  6. radar图生成用户guideline

    1.最后生成的效果是这样的: 2.第一个对话框如下(包含了样图),用于输入维度个数[最小为4,最大不限]: 3.第二个对话框如下,根据维度个数生成了信息录入表[每个维度3个信息,每3个一次重复,不清楚 ...

  7. Android 获取手机的厂商、型号、Android系统版本号、IMEI、当前系统语言等工具类

    最近在开发中,需要用到一些系统信息,这里我把这些方法写成一个工具类方便以后复用,该工具类有以下6个功能: 1.获取手机制造厂商 2.获取手机型号 3.获取手机系统当前使用的语言 4.获取Android ...

  8. ALSA driver--Asoc

    https://blog.csdn.net/zyuanyun/article/details/59170418 ALSA Asoc框架如下图: Asoc分为machine,platform,codec ...

  9. 每天进步一点点------基础实验_13_有限状态机 ：Mealy型序列检测器

    /********************************************************************************* * Company : * Eng ...

  10. 哈希 Perl第六章

    哈希元素赋值: $hash{$some_key}  =  ‘something' 访问整个哈希: %some_hash = (’a' , '0' , 'b' , '1' , 'c' , '3') @a ...