<!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. BZOJ2038: [2009国家集训队]小Z的袜子(hose) 莫队算法

    要使用莫队算法前提 ,已知[l,r]的答案,要能在logn或者O(1)的时间得到[l+1,r],[l-1,r],[l,r-1],[l,r+1],适用于一类不修改的查询 优美的替代品——分块将n个数分成 ...

  2. 【opencv】图像细化

    [原文:http://blog.csdn.net/qianchenglenger/article/details/19332011] 在我们进行图像处理的时候,有可能需要对图像进行细化,提取出图像的骨 ...

  3. 高质量、处于持续更新的R包

    本文在Creative Commons许可证下发布 自由软件的问题是开发人员没有稳定的资金来源支持,可能更新上做不到持续.经过考证和圈内朋友的帮助,现在把R包中高质量.持续更新的跟大数据事业相关的R包 ...

  4. MVC 实现计算页面执行时间

    使用 ActionFilterAttribute 来实现: public class PerformanceActionAttribute:ActionFilterAttribute { public ...

  5. 设备扩展(DEVICE_EXTENSION)

    原文链接:http://blog.csdn.net/hazy/article/details/481705 WDM中的结构   ---设备扩展 设备扩展(DEVICE_EXTENSION)是与设备对象 ...

  6. vim讲解

    文本编辑vi使用 最好使用vim,采用sudo apt-get install vim vi是Linux及类Unix系统中主流的命令行文本编辑器,功能极为强大,vim是增强版本的vim.Vim的高级地 ...

  7. 打造无DLL版穿透防火墙Downloader

    这份代码的思路来自于国外EES组织的Aphex.基本上所有的无DLL Download都是利用的这种方法.其实也就是用烂了的远程注入法.不过注入的对象不是一个DLL,而是本身的一个过程.下面是代码,由 ...

  8. lazyload 图片延迟加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 委托、匿名函数、Lambda表达式和事件的学习

    委托: 还记得C++里的函数指针么?大家可以点击这里查看一下以前的笔记.C#的委托和C++中的函数指针效果一致. 当我们需要将函数作为对象进行传递和使用时就需要用到委托. 下面我们看一个例子: usi ...

  10. cocos2d-x RenderTexture

    转自:http://blog.csdn.net/bill_man/article/details/7250911 1.CCRenderTexture 使用CCRenderTexture的过程总结起来一 ...