今天来到了妙味课堂的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组第三题（8.10）

    2301. [普及组T3或T4]线索 (File IO): input:assassin.in output:assassin.out 时间限制: 1000 ms  空间限制: 262144 KB 题 ...

  2. php 法大大对接

    通过编写扩展实现, 实现两种方式签署 1, 存证签署 存证签署流程 /** *个人 *客户在平台注册(姓名,身份证,手机号)---->三要素验证----->获取客户编号-------> ...

  3. wamp修改MySQL密码

    wamp默认密码为空 用户名为root: 左击wamp绿色小图标,打开phpMyAdmin ->执行 ->账号 ->找到用户名为root的修改权限&&点击修改权限 - ...

  4. BLUE引擎检查放入装备的名称全名脚本

    格式:CHECKDLGITEMNAME 名称 检查条件需要配合QUERYITEMDLG命令 ;========================================== [@main]#AC ...

  5. IntelliJ IDEA 2017.3尚硅谷-----如何创建模块

  6. opencv：形态学操作-腐蚀与膨胀

    #include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...

  7. 【Webex】加入会议是无法正常加入！提示“下载会议组件时无法获取正确的参数。 请联系技术支持以获取帮助。

    来自:Cisco Webex帮助中心 https://help.webex.com/zh-cn/WBX9000023909/Error-Failed-to-get-correct-parameters ...

  8. const和defin区别

    (1)类型的安全性检查:const常量有数据类型,而define定义宏常量没有数据类型.则编译器可以对前者进行类型安全检查,而对后者只进行字符替换,没有类型安全检查(字符替换时可能会产生意料不到的错误 ...

  9. pwnable.kr-bof-Writeup

    MarkdownPad Document *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  10. HL7解析器

    最近做了关于医疗的项目,用了HL7协议,以下是解析的代码: HL7解析器: using System; using System.Text; using System.Xml; using Syste ...