用html5拖拽功能实现了一个简单的购物车，样式简陋，得学学画画提高下审美了T^T：

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>购物车拖拽</title>

 <style>
 *{ margin:0; padding:0;}
 #proList{ overflow:hidden;}
 #proList li{ list-style:none; float:left; margin:10px; padding:10px; border:1px solid #CCC;}
 #proList img{ width:200px; height:200px;}
 #proList p{ height:30px; text-indent:10px;}
 #proList p a{ text-decoration:none; color:#444; }

 #shopCarList{ width:500px; margin-left:10px; padding:10px; border:1px solid #ccc;}
 #shopCarList .proInfo{ line-height:20px; }
 #shopCarList .proInfo span{ display:inline-block;}
 #shopCarList .proInfo .amount{ width:50px; }
 #shopCarList .proInfo .title{ width:300px;}
 #shopCarList .proInfo .price{ width:100px;}
 #total{ text-align:right; border-top:1px dotted #ccc; padding:3px 0; margin-top:5px;}

 </style>

 <script>
 window.onload = function(){
     var proList = document.getElementById('proList');
     var aLi = proList.getElementsByTagName('li');
     var shopCarList = document.getElementById('shopCarList');
     var totalNow = 0;
     var json = {};    //为产品是否已经加入购物车提供标识

     for(var i=0;i<aLi.length;i++){
         aLi[i].ondragstart = function(ev){
             var aP = this.getElementsByTagName('p');
             ev = ev || window.event;
             ev.dataTransfer.setData('title',aP[0].innerHTML);
             ev.dataTransfer.setData('price',parseInt(aP[1].innerHTML.substring(1)));
         }
     }

     shopCarList.ondragover = function(ev){
         ev = ev || window.event;
         ev.preventDefault();
     }

     shopCarList.ondrop = function(ev){
         ev = ev || window.event;
         ev.preventDefault();
         var pTitle = ev.dataTransfer.getData('title');
         var pPrice = ev.dataTransfer.getData('price');
         var total = document.getElementById('total');

         if(!json[pTitle]){    //购物车不存在该产品时，新建该产品信息

             var oDiv = document.createElement('div');
             oDiv.className = 'proInfo';

             var oAmount = document.createElement('span');
             oAmount.className = 'amount';
             oAmount.innerHTML = 1;

             var oTitle = document.createElement('span');
             oTitle.className = 'title';
             oTitle.innerHTML = pTitle;

             var oPrice = document.createElement('span');
             oPrice.className = 'price';
             oPrice.innerHTML = '￥' + pPrice;

             oDiv.appendChild(oAmount);
             oDiv.appendChild(oTitle);
             oDiv.appendChild(oPrice);

             shopCarList.appendChild(oDiv);

             json[pTitle] = 1;

         }else{    //若存在该产品，该产品在购物车内的数量累加
             var aTitle = shopCarList.getElementsByClassName('title');
             var aAmount = shopCarList.getElementsByClassName('amount');
             /*
             alert(aTitle.length);
             alert(aAmount.length);*/

             for(var i=0;i<aTitle.length;i++){
                 if(aTitle[i].innerHTML == pTitle){
                     aAmount[i].innerHTML = parseInt(aAmount[i].innerHTML) + 1;
                 }
             }
         }

         //计算总价值
         if(!total){
             var total = document.createElement('div');
             total.id = 'total';
         }
         totalNow += parseInt(pPrice);
         total.innerHTML = '￥'+ totalNow;
         shopCarList.appendChild(total);
     }
 }

 </script>

 </head>

 <body>

 <ul id="proList">
     <li draggable="true">
         <a href="#"><img src="imgs/TB1DDLcLXXXXXXvXFXXXXXXXXXX-200-200.jpg" alt=""/></a>
         <p>荣耀4A</p>
         <p>￥599</p>
     </li>
     <li draggable="true">
         <a href="#"><img src="imgs/TB2T2xNeXXXXXbRXpXXXXXXXXXX_!!1114511827.jpg" alt=""/></a>
         <p>华为畅享5S</p>
         <p>￥699</p>
     </li>
     <li draggable="true">
         <a href="#"><img src="imgs/TB2t3WCfpXXXXcXXXXXXXXXXXXX_!!1114511827.jpg" alt=""/></a>
         <p>荣耀7</p>
         <p>￥799</p>
     </li>
     <li draggable="true">
         <a href="#"><img src="imgs/TB2YE6HeVXXXXcRXXXXXXXXXXXX_!!1114511827.jpg" alt=""/></a>
         <p>荣耀4C</p>
         <p>￥899</p>
     </li>
 </ul>
 <div id="shopCarList"></div>

 </body>
 </html>

HTML5自学笔记[ 10 ]简单的购物车拖拽的更多相关文章

  1. JAVA自学笔记10

    JAVA自学笔记10 1.形式参数与返回值 1)类名作为形式参数(基本类型.引用类型) 作形参必须是类的对象 2)抽象类名作形参 需要该抽象类的子类对象,通过多态实现 3)接口名为形参 需要的是该接口 ...

  2. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  3. HTML5自学笔记[ 9 ]HTML5实现元素的拖放

    要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不 ...

  4. Html5 自学笔记

      1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...

  5. Android学习系列(10)--App列表之拖拽ListView(上)

     研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨.      鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...

  6. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

  7. HTML5深入学习之鼠标跟随，拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  8. HTML5学习笔记一 简单学习HTML5

    什么是HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标记语言 标记语言是一 ...

  9. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

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

随机推荐

  1. BZOJ 2768 冠军调查（最小割）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2768 题意:给出一个无向图,每个点有一个值0或者1.现在重新设置每个点的值0或者1.设重 ...

  2. js对数组排序

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

  3. FreeSWITCH 1.6关于视频通话的一些测试

    简单的测试了一下,暂时没把精力放到这一块. ① 视频编码透传的设置(使用代理模式). 修改internal.xml文件的以下参数: <param name="inbound-proxy ...

  4. python_way day18 html-day4， Django路由，（正则匹配页码，包含自开发分页功能）， 模板， Model(jDango-ORM) : SQLite，数据库时间字段插入的方法

    python_way day18 html-day4 1.Django-路由系统   - 自开发分页功能 2.模板语言:之母板的使用 3.SQLite:model(jDango-ORM) 数据库时间字 ...

  5. IBM Lotus Domino V8.5 服务器管理入门手册

    转自 http://freemanluo.blog.51cto.com/636588/336128

  6. shell script创建库

    先创建名称为 myfuns # my script functions function addem { + $ ] } function multem { * $ ] } function dive ...

  7. hdu3060Area2(任意多边形相交面积)

    链接 多边形的面积求解是通过选取一个点(通常为原点或者多边形的第一个点)和其它边组成的三角形的有向面积. 对于两个多边形的相交面积就可以通过把多边形分解为三角形,求出三角形的有向面积递加.三角形为凸多 ...

  8. poj1319Pipe Fitters

    链接 算不上几何的水题 第一种为(int)a*(int)b: 第二种分宽高交换两种讨论. 每一个的高度除第一个为1外其它的都可以看着b/sqrt(3.0)/2; #include <iostre ...

  9. Android Glide+CircleImageView实现加载圆形图片列表

    需求:要在列表中实现圆形图片的显示,控件可能和加载库会存在冲突 先上代码,至于其中源码,以后有空再分析 MainActivity public class MainActivity extends A ...

  10. STM32学习笔记(三) STM32的GPIO的深入学习

    STM32的开发学习主要涉及软硬件两个部分的实现,包含众多外设和总线的理解配置.STM32的整个学习曲线并不陡峭,但入门却相当困难,因此在学习之初,多动手实验和测试相当重要,GPIO作为整个STM32 ...