<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         li{
             list-style: none;
         }
         /*reset*/
         .productList{
             zoom: 1;
         }
         .productList:after{
             display: block;
             content: '';
             clear: both;
         }
         li{
             float: left;
             border: 1px solid grey;
             margin: 10px;
         }
         img{
             border: 1px solid darkslategray;
         }
         p{
             border-bottom: dashed 1px grey;
         }
         .checkout{
             width: 800px;
             height: 400px;
             border: 1px solid grey;
         }
         .p{
             height: 30px;
             line-height: 30px;
         }
         .span{
             margin-right: 29%;
         }
         .all{
             float: right;
         }
     </style>
     <script>
         onload= function () {
             //获取
             var aLi=document.getElementsByTagName('li');
             var oCheckout=document.getElementById('checkout');
             //创建json
             var obj={};
             //声明变量，初始化
             var iNum=0;
             var allMoney;
             //拖拽商品
             for(var i= 0,len=aLi.length;i<len;i++){
                 aLi[i].ondragstart= function (ev) {
                     ev=ev||event;
                     //存数据
                     var aP=this.getElementsByTagName('p');
                     ev.dataTransfer.setData('title',aP[0].innerHTML);
                     ev.dataTransfer.setData('money',aP[1].innerHTML);
                     //拖拽图片
                     ev.dataTransfer.setDragImage(this,0,0);     //setDragimage（拖拽的图片，拖拽时鼠标光标所在图片的x坐标，拖拽时鼠标光标所在图片的y坐标）
                 }
             }
             //兼容ff
             oCheckout.ondragover= function (ev) {
                 ev=ev||event;
                 ev.preventDefault();
             };
             //放入购物车
             oCheckout.ondrop= function (ev) {
                 //阻止浏览器的默认行为：将文件放到浏览器中会自动打开
                 ev=ev||event;
                 ev.preventDefault();
                 //取商品数据
                 var oTitle=ev.dataTransfer.getData('title');
                 var oMoney=ev.dataTransfer.getData('money');
                 //判断在购物车中是否已经存在此商品
                 if(!obj[oTitle]){   //购物车中不存在此商品
                     //动态创建p
                    var oP=document.createElement('p');
                    oP.className='p';
                     //分别动态创建商品的三个数据
                    var oSpan=document.createElement('span');
                    oSpan.className='span num';
                    oSpan.innerHTML=1;
                    oP.appendChild(oSpan);

                    var oSpan=document.createElement('span');
                    oSpan.className='span topic';
                    oSpan.innerHTML=oTitle;
                    oP.appendChild(oSpan);

                    var oSpan=document.createElement('span');
                    oSpan.className='span';
                    oSpan.innerHTML=oMoney;
                    oP.appendChild(oSpan);

                    this.appendChild(oP);
                     //标记为购物车中已经存在此商品
                    obj[oTitle]=1;
                }else{       //购物车中已经存在此商品
                     //获取
                     var oNum=document.getElementsByClassName('num');
                     var oTopic=document.getElementsByClassName('topic');
                     for(var i= 0,len=oNum.length;i<len;i++){
                         //寻找将要放入购物车的商品在购物车中已经存在的位置
                         if(oTopic[i].innerHTML==oTitle){
                             //数量加一
                             //记得有单位，要用parsetInt去掉
                             oNum[i].innerHTML=parseInt(oNum[i].innerHTML)+1;
                         }
                     }
                 }
                 //要使用此种判断方法，就要实现声明但不实例化，这样在js中符合判断要求
                 //首次创建，创建后即已经实例化，不再为空，则allMoney为true
                 if(!allMoney){
                     allMoney=document.createElement('div');
                     allMoney.className='all';
                 }
                 //结算所有商品
                 iNum+=parseInt(oMoney);
                 //单位
                 allMoney.innerHTML=iNum+'￥';
                 this.appendChild(allMoney);
             }
         }
     </script>
 </head>
 <body>
     <ul class="productList">
        <li draggable="true">
            <img src="data:image/lover20.JPG" alt="" width="200" height="300"/>
            <p>小婆婆</p>
            <p>10￥</p>
        </li>
         <li draggable="true">
             <img src="data:image/lover20.JPG" alt="" width="200" height="300"/>
             <p>大婆婆</p>
             <p>10￥</p>
         </li>

         <li draggable="true">
             <img src="data:image/lover20.JPG" alt="" width="200" height="300"/>
             <p>肥婆婆</p>
             <p>10￥</p>
         </li>

         <li draggable="true">
             <img src="data:image/lover20.JPG" alt="" width="200" height="300"/>
             <p>中婆婆</p>
             <p>10￥</p>
         </li>

     </ul>
     <div class="checkout" id="checkout">
        <!-- <p>
             <span>1</span>
             <span>小婆婆</span>
             <span>10￥</span>
         </p>
         <p>
             <span>1</span>
             <span>小婆婆</span>
             <span>10￥</span>
         </p>
         <p>
             <span>1</span>
             <span>小婆婆</span>
             <span>10￥</span>
         </p>
         <p>
             <span>1</span>
             <span>小婆婆</span>
             <span>10￥</span>
         </p>
         <div class="all">
             40￥
         </div>-->
     </div>
 </body>
 </html>

h5拖放-拖拽购物车的更多相关文章

  1. h5原生拖拽

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  3. 自制一个H5图片拖拽、裁剪插件（原生JS）

    前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图 ...

  4. PCB Winform中的WebBrowser扩展拖放(拖拽)功能 实现方法

    我们在Winform支持网页通常增加WebBrowser控件实现,相当于内嵌浏览器浏览网页使用, 而此WebBrowser默认情况是文件拖入功能是不支持的, 如何才能支持呢.在这里介绍如何实现方法 一 ...

  5. H5之拖拽

    步骤: 1.为将要拖拽的元素设置允许拖拽,并赋予dragstart事件将其id转换成数据保存: 2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置,并赋予drop事件进行元素的 ...

  6. H5 拖拽,一个函数搞定,直接指定对象设置可拖拽

    页面上,弹个小窗体,想让它可以拖拽,又不想 加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的 拖拽 在 HTML5 中,拖放是标准的一部分,任何元 ...

  7. h5拖拽上传图片

    h5实现拖拽上传图片 本文将为大家介绍如何通过js实现拖拽上传图片. 首先我们要禁用调浏览器默认的拖拽事件: window.onload = function(){ //拖离 document.add ...

  8. 商品呢拖拽到购物车，appendChild的剪切功能

    今天来到了妙味课堂的html5课程的第2张的第8节,讲的是把商品拖拽到购物车的演示.其中有一个关于appendChild的使用,,每次拖拽都会触发这个方法,但是每次之后,却还是只有一个总价,好吧,说不 ...

  9. React 实现拖拽功能

    实现效果:(可戳 https://codepen.io/wenr/pen/EGEQxp 查看) 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感 ...

随机推荐

  1. kettle作业（job）调用转换，设置变量，写日志到数据库中【转】

    首先建立转换:从数据库表到日志 表输入的设置:   日志设置:   新建job:     转换选择刚才建好的输出日志转换.变量设置如下: 此ID就是转换中的${ID},执行job,可以看到控制台输出日 ...

  2. spring的三种注入方式

    接口注入(不推荐) 构造器注入(死的应用) getter,setter方式注入(比较常用) Type1 接口注入 我们常常借助接口来将调用者与实现者分离.如: public class ClassA  ...

  3. BinaryReader和BinaryWriter的leaveOpen参数 z

    在.NET 4.5后,微软为BinaryWriter和BinaryReader类型的构造函数中加入了leaveOpen参数,当该参数为true后,BinaryReader或者BinaryWriter关 ...

  4. delphi 中使用WaitForMultipleObjects等待线程执行，再执行后续代码

    unit1 [delphi] view plain copyunit Unit1; interface uses Windows, Messages, SysUtils, Variants, Clas ...

  5. 【Linux.Python】Python进程后台启动

    嗯,比较忧伤. 前几天写了个tornado,启动了,很开心,后来每天要用时都发现it是kill掉的.好吧,是我太蠢啦.百度了下资料 python的启动方式: 1 python yourfile.py ...

  6. redhat mysql 远程开启

    2)开启远程接入.登录到数据库,对mysql.user进行操作 表Mysql.user记录了不同用户不同主机不同的权限.可通过命令查看: Select * from mysql.user : 插入新用 ...

  7. Cppcheck代码分析（2）

    功能 解析函数中的可能的代码执行流 函数实际执行中只会执行代码流中的一条流 分析: 分支语句 if-else ,switch-case 循环语句 while, do-while ,for 代码流举例 ...

  8. HDU-4686 Arc of Dream 构造矩阵

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4686 因为ai = ai-1*AX+AY ,bi = bi-1*BX+BY ,那么ai*bi=AX*B ...

  9. Spring基础知识汇总 Java开发必看

    Spring简介 Spring框架由Rod Johnson开发,2004年发布了Spring框架的第一版.Spring是一个从实际开发中抽取出来的框架,因此它完成了大量开发中的通用步骤,留给开发者的仅 ...

  10. RecyclerView设置verticalSapcing等

    RecyclerView没有像GridView那样有提供verticalSpacing属性,上StackOverflow找到了一种替代方法,代码如下 public class SpacesItemDe ...