效果图展示：

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

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

 <!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. CoolBlog开发笔记第4课:数据库模型设计

    教程目录 1.1 CoolBlog开发笔记第1课:项目分析 1.2 CoolBlog开发笔记第2课:搭建开发环境 1.3 CoolBlog开发笔记第3课:创建Django应用 前言 我新书<Py ...

  2. Zookeeper：分布式程序的基石

    一.目录 1.zookeeper是什么? 2.安装.配置.启动.监控 3.javaApi基础用法 4.应用场景 5.CAP理论/paxos算法 二.zookeeper简介 官方版:zookeeper是 ...

  3. gdb常用命令及使用gdb调试多进程多线程程序

    一.常用普通调试命令 1.简单介绍GDB 介绍: gdb是Linux环境下的代码调试⼯具.使⽤:需要在源代码⽣成的时候加上 -g 选项.开始使⽤: gdb binFile退出: ctrl + d 或 ...

  4. Android 音乐播放

    android简单音乐播放控制代码 这个几个月业余时间一直在做一个android项目,里面涉及到了音乐播放功能.很简单那种,播放.暂停.上一曲.下一曲.音量调节等. 音乐播放主要使用的对象是Media ...

  5. PHP数组按引用传递

    <?php /**PHP数组按引用传递**/ $arr = array( array('id' => 1, 'name' => 'name1'), array('id' => ...

  6. Bootsrtap表单

    前面的话 表单是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都 ...

  7. eclipse 导入git库 Android工程

    1. 导入git库 1.1 从git库 clone 代码 在file->import中选中Git 目录下的Projects from Git 点击Next 选择 URL 点击Next 输入URL ...

  8. Linux之用户管理--初级上

    管理用户命令汇总 命令 注释说明(特殊颜色的必须掌握) useradd增 同adduser命令,执行此命令可在系统中添加用户.(更改4个用户文件) userdel删 执行此命令可删除用户及相关用户的配 ...

  9. angularLoad（用以异步加载js文件）

    angularLoad(用以异步加载js文件) 使用方法: 1.执行命令 下载 lib npm install angular-load --save 2.index.html引用js <scr ...

  10. Web自动化之Headless Chrome概览

    Web自动化 这里所说的Web自动化是所有跟页面相关的自动化,比如页面爬取,数据抓取,页面内容检测,页面功能测试,页面加载性能测试,页面回归测试等等,当前主要由如下几种解决方式: 文本数据获取 这就是 ...