效果图展示：

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

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

 <!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. $.Deferred 延迟对象

    一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...

  2. Intellj IDEA光标为insert状态，无法删除内容

    以前用得是社区版的IDEA,今天装了14版本的,结果导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标,并且还无法删除内容,且按删除(delete)键也只见光标往前 ...

  3. Vivo展柜灯怎样设计才吸引大量客户？

    1.vivo展柜灯计划的目标是使消耗者在无限的时空中最无效地承受信息.因而,vivo展柜灯计划便是围绕着怎样无效地进步展现活动的服从和质量停止的.除了展现环境本身的计划之外,展现对象陈列方式的计划也是 ...

  4. ecshop中smarty比较操作符(eq,ne,neq)含义

    eq相等, ne.neq不相等, gt大于, lt小于, gte.ge大于等于, lte.le 小于等于, not非, mod求模.  is [not] div by是否能被某数整除, is [not ...

  5. SharePoint 2013 安装

    步骤 1:打开提升的 SharePoint 2013 命令行管理程序 选择与您的服务器操作系统对应的过程. 在 Windows Server 2008 R2 中 单击“开始”>“所有程序”> ...

  6. 网络编程学习笔记（二）基于TCP的Socket编程

    1.Socket:英文意思插座.两个Java应用程序可以通过一个双向的网络通信连接实现数据交换,这个双向链路的一端称为一个Socket. 2.Socket通常用来实现client-server(客户端 ...

  7. readSerializableObj

    package JBJADV003;import java.io.*;public class readSerializableObj { public static void main(String ...

  8. Unity3D-Shader-复古电影荧幕特效

    [旧博客转移 - 2015年12月6日 18:12]   今天用Shader做了一个复古荧幕效果,老电视机放映的感觉,写篇文章记录一下     原始图片:   没错,这就是电影<泰坦尼克号> ...

  9. 几个SQL语句(备忘)

    1.三涨停 select biao1.代码,biao1.名称 from biao1,biao2,biao3 where (biao1.涨幅+ biao2.涨幅+biao3.涨幅)>0.27 an ...

  10. Andorid源码系列:View的onTouchEvent()与performClick(),performLongClick()调用时机解析

    这是大土豆的第一篇博客,想着工作3年多了,在工作上从一名菜鸟逐渐成长为在项目中能干点事的人,自己对Android的见解也一步步加深,有必要写一些对Android代码和开发过程中的感悟,和广大朋友们分享 ...