效果图展示：

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

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

 <!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. 【Android Developers Training】 30. 允许其它应用启动你的Activity

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. 2.如何搭建MQTT环境

    1.源码下载https://github.com/andsel/moquette 注意下载2016.2版本2.idea下载http://confluence.jetbrains.com/display ...

  3. JAVAEE——SSH三大框架整合（spring+struts2+hibernate）

    一.整合原理 二.导包(41个) 1.hibernate (1)hibernate/lib/required (2)hibernate/lib/jpa | java persist api java的 ...

  4. 简单粗暴的在vmware虚拟机中固定ip

    虚拟机对于很多做测试的或者在学习测试中的人来说是位常客,经常会用到,但是虚拟机重启之后,很多人遇到虚拟机ip变化,很是头痛,我在学习过程中也遇到了这个问题,百度了很多办法,有些办法对于网络知识小白来说 ...

  5. PAT-1099(Build A Binary Search Tree)

    题目见这里 分析:分四步进行 1)根据给定的结点情况建二叉树  2)对输入的键值排序(asending) 3)对二叉树中序遍历,同时对应赋key值 4)层次遍历(队列应用) 题目并不困难,但是我误入了 ...

  6. 快速学习springMVC框架原理

    一.通过导图的方法快速去理解springmvc的原理 二.架构流程. 1. 用户发送请求至前端控制器DispatcherServlet 2. DispatcherServlet收到请求调用Handle ...

  7. Postgresql快速写入/读取大量数据（.net）

    环境及测试 使用.net驱动npgsql连接post数据库.配置:win10 x64, i5-4590, 16G DDR3, SSD 850EVO. postgresql 9.6.3,数据库与数据都安 ...

  8. string can not be resolved

    参考:http://jingyan.baidu.com/article/a17d5285339c828099c8f245.html

  9. HTML5头部标签中<meta>常用信息

    整理一些平时常用的,方便查阅 <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <m ...

  10. Java条形码/二维码生成和解析

    注意-本类依赖jar包文件:core.jar和zxing-javase.jar 下载jar文件,到本博客文件栏目下载. import com.google.zxing.BarcodeFormat; i ...