效果图展示：

当将书拖拽至购物车一览时：

首先将页面的基本结构写出来：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>加入购物车功能</title>

 </head>

 <body>

 <ul>

     <li draggable="true">

         <img src="data:images/img1.jpg"/>

         <p>JavaScript语言精粹</p>

         <p>40元</p>

     </li>

     <li  draggable="true">

         <img src="data:images/img2.jpg"/>

         <p>JavaScript权威指南</p>

         <p>80元</p>

     </li>

     <li draggable="true">

         <img src="data:images/img3.jpg"/>

         <p>精通JavaScript</p>

         <p>50元</p>

     </li>

     <li draggable="true">

         <img src="data:images/img4.jpg"/>

         <p>JavaScript DoM 编程艺术</p>

         <p>40元</p>

     </li>

 </ul>

 <div id="div1">

     <p>

         <span class="box1">数量</span>

         <span class="box2">书名</span>

         <span class="box3">单价</span>

     </p>

 <!--    <p>

     <span class="box1">1</span>

     <span class="box2">JavaScript DoM 编程艺术</span>

     <span class="box3">40元</span>

     </p>-->

 </div>

 <input id="input1" value="付款" type="submit"/>

 </body>

 </html>

此时需要注意因为li是可以拖拽的，需要给每个li添加draggable = "true"

再稍微添加样式，因为主要为了实现功能，样式就粗略一些：

<style>

    *{

        margin:0px;

        padding:0px;

    }

    li{

        list-style: none;

        width:200px;

        border: 1px solid #000;

        float: left;

    }

    img{

        width:200px;

    }

    #div1{

        width:400px;

        height:200px;

        border: 1px solid #000;

        margin:10px;

        float: left;

        clear: both;

    }

    p{

        width:100%;

        border:1px dashed #000;

        clear:both;

    }

    .box1{

        float:left;

        margin-right:20px ;

    }

    .box2{

        float: left;

        margin-right:20px ;

    }

    .box3{

        float:left;

        margin-right:20px ;

    }

    .allMoney{

        float:right;

        clear: both;

    }

    #input1{

        width:80px;

        margin-left:10px;

        clear: both;

        float: left;

    }

</style>

此时的效果图：

但是此时是没有功能的，最后开始写最主要的功能JS模块：

window.onload = function (){

            var aLi = document.getElementsByTagName("li");

            var oDiv = document.getElementById("div1");

            var oInput = document.getElementById("input1");

            for(var i=0;i<aLi.length;i++){

                aLi[i].ondragstart = function (ev){

                    var ev = ev||window.event;

                    var aP = this.getElementsByTagName("p");

                    ev.dataTransfer.setData("title",aP[0].innerHTML);

                    ev.dataTransfer.setData("money",aP[1].innerHTML);

                }

                oDiv.ondragover = function(ev){

                    var ev = ev||window.event;

                    ev.preventDefault();

                }

            }

            oDiv.ondrop = function (ev){

                var ev = ev||window.event;

                ev.preventDefault();

                var sTitle = ev.dataTransfer.getData("title");

                var sMoney = ev.dataTransfer.getData("money");  

                    var cP = document.createElement("p");

                    this.appendChild(cP);

                    var span1 = document.createElement("span");

                    span1.className = "box1";

                    span1.innerHTML = "1";

                    cP.appendChild(span1);

                    var span2 = document.createElement("span");

                    span2.className = "box2";

                    span2.innerHTML = sTitle;

                    cP.appendChild(span2);

                    var span3 = document.createElement("span");

                    span3.className = "box3";

                    span3.innerHTML = sMoney;

                    cP.appendChild(span3);

                    json[sTitle]=1;

            }

        }

    </script>

需要注意的说里面的方法：

ondragstart 是当被拖拽元素开始拖动时发生的事件。

ondragover 是被拖拽元素拖动到目标元素身上时发生连续触发的事件，是应该添加到目标元素身上的事件。它是有默认事件的，只有将它的默认事件阻止了，才能实现ondrog事件。

ondrog 是被拖拽元素拖到目标元素身上，然后松开鼠标时的事件。这个事件的实现必须阻止ondragover的默认事件，通过ev.preventDefault();因为图片拖动的时候浏览器默认是打开图片的，所以在这个事件里面，我们也需要阻止它的默认事件。ev.preventDefault()。

ev.dataTransfer.setData( ， ) 是添加了一个有索引的值。第一个输入的参数就是它的索引，第二个就是它的值。

对立的就是ev.dataTransfer.getData(  )，不过它只有一个参数，就是需要得到的值的索引。

在ondrog事件里面动态的添加购物车里面的数据。通过appendChild加入购物车这个div里面去。

但是此时能发现一个问题，此时当添加重复的书进去的时候，它是另外添加了一个子元素，我们需要的是应该在原来有的子元素上的数量进行累加才对。

所以对ondrog事件里面的内容进行改进：

首先增加了几个全局变量：

             var oInput = document.getElementById("input1");

             var json = {};

             var allMoney = null;

然后使用在ondrog事件里面：

 if(!json[sTitle]){

                     var cP = document.createElement("p");

                     this.appendChild(cP);

                     var span1 = document.createElement("span");

                     span1.className = "box1";

                     span1.innerHTML = "1";

                     cP.appendChild(span1);

                     var span2 = document.createElement("span");

                     span2.className = "box2";

                     span2.innerHTML = sTitle;

                     cP.appendChild(span2);

                     var span3 = document.createElement("span");

                     span3.className = "box3";

                     span3.innerHTML = sMoney;

                     cP.appendChild(span3);

                     json[sTitle]=1;

                 }

                 else{

                     var oBox1 = document.getElementsByClassName("box1");

                     var oBox2 = document.getElementsByClassName("box2");

                     var oBox3 = document.getElementsByClassName("box3");

                     for (var i=0;i<oBox2.length;i++){

                         if(oBox2[i].innerHTML == sTitle){

                             oBox1[i].innerHTML = parseInt(oBox1[i].innerHTML)+1;

                             oBox3[i].innerHTML = parseInt(oBox3[i].innerHTML)+parseInt(sMoney)+"元";

                         }

                     }

                 }

                 if(!allMoney){

                     allMoney = document.createElement("div");

                     allMoney.className = "allMoney";

                 }

                 var oBox3 = document.getElementsByClassName("box3");

                 var tempMoney = 0;

                 for(var i =1;i<oBox3.length;i++){

                     tempMoney+=parseInt(oBox3[i].innerHTML);

                 }

                 allMoney.innerHTML = "总价："+tempMoney+"元";

                 oDiv.appendChild(allMoney);

             }

             oInput.onclick = function () {

                 alert("你需要购买商品的总价为"+allMoney.innerHTML);

             }

在这里通过一个Json[sTitle]来判断购物车里面是否已经有了这本书，，如果没有就进行动态的添加，有的话就通过类名，找到所有已经存在购物车里面的书的数量，名字和价格，用

一个for循环和书的名字来找到那本书的已有数量和价格，进行累加。

最后再添加了总价格的显示和提交按钮的一个效果。

JS实现添加至购物车功能的更多相关文章

  1. jQuery 复制节点的元素实现添加到购物车功能

    描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆 ...

  2. DJANGO-天天生鲜项目从0到1-009-购物车-Ajax实现添加至购物车功能

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  3. 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)

    主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...

  4. 给destoon商城的列表中和首页添加购物车功能

    如何给destoon商城的列表中和首页添加购物车功能? 目前加入购物车的功能只存在商城的详细页面里,有时候我们需要批量购买的时候,希望在列表页就能够使用这个加入购物车的功能. 修改步骤见下: 例如在商 ...

  5. react.js 之 批量添加与删除功能

    最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上 ...

  6. vue登录功能和将商品添加至购物车实现

     2.1: 学子商城--用户登录 用户登录商城用户操作行为,操作用户输入用户名和密码 点击登录按钮,一种情况登录成功 一种情况登录失败 "用户名或密码有误请检查" 2.2:如何实现 ...

  7. ASP.NET之电子商务系统开发-2(购物车功能)

    一.前言 继上次的首页数据列表后,这是第二篇.记录一下购物车这个比较庞大的功能,可能实现的方法跟其他人有点不一样,不过原理都差不多,是将cookie存数据库里面的. 二.开始 首先看一下购物车流程及对 ...

  8. vue实战记录（五）- vue实现购物车功能之商品总金额计算和单选全选删除功能

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(五) GitHub:sue ...

  9. vue实战记录（四）- vue实现购物车功能之过滤器的使用

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...

随机推荐

  1. java如何LOG打印出日志信息

    log4j 记录日志方式 log4j 是apache 提供的记录日志的jar 档. 下载路径: http://logging.apache.org/log4j/1.2/download.html 这里 ...

  2. java的logcat的简单使用

    android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, WA ...

  3. 4.jsp的内置对象

    1.jsp有九大内置对象 out request response session application page pagecontext exception config 2.用户发请求 requ ...

  4. python yield from 语法

    python yield from 语法 yield语法比较简单, 教程也很多 , yield from的中文讲解很少 , python官网是这样解释的 PEP 380 adds the yield ...

  5. EventUtil.addHandler方法

    EventUtil.addHandler: addHandler 方法,职责是分别视情况而定来使用DOM0级方法.DOM2级方法或IE方法来添加事件.   这个方法属于一个名字叫EventUtil的对 ...

  6. 极简单的方式序列化sqlalchemy结果集为JSON

    继承 json.JSONEncoder 实现一个针对sqlalchemy返回类型的处理方式. sqlalchemy的返回类型有大都有两种,一种是Model对象,一种是Query集合(只查询部分字段). ...

  7. css自定义动画在微信中无法执行的原因

    这是我去年年底遇到的一个问题, 在这个过程中我发现了一个比较有趣的问题. 我们在做抽奖的时候,微信分享到朋友圈的页面里,安卓机器无法执行页面中的自定义动画(元宝的位移,进入按钮的放大缩小等等).这让我 ...

  8. Android 测试 Appium、Robotium、monkey等框架或者工具对比

    1. Appium测试 (功能测试,用户接受度测试,黑盒测试) - Rating: 8 Appium测试相当于黑盒测试.只是测试UI逻辑正确性.所以Appium测试框架提供的方法有限.获取一个Appi ...

  9. 如何删除 SQL Server 表中的重复行

    第一种:有主键的重复行,就是说主键不重复,但是记录的内容重复比如人员表tab ,主键列id,身份证编号idcard当身份证重复的时候,保留最小id值的记录,其他删除delete a from tab ...

  10. xdu_1009: Josephus环的复仇（线段树）

    题目链接 题意不难理解,解法具体看代码及注释吧.. #include<bits/stdc++.h> using namespace std; typedef long long LL; ; ...