简要代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:; padding:;}
li{ list-style:none;}
li{ float:left; width:200px; border:1px # solid; margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px # dashed;}
#div1{ width:600px; border:1px # solid; height:300px; clear:both;}
.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width:200px;}
#allMoney{ float:right;}
</style>
</head>
<body>
<!-- 要拖动的书籍 -->
<ul>
<!-- draggable="true"含义是,div可以允许拖动 -->
<!-- 下面定义的格式是图片,名词,钱 -->
<li draggable="true">
<img src="img1.jpg" />
<p>javascript语言精粹</p>
<p>¥</p>
</li>
<li draggable="true">
<img src="img2.jpg" />
<p>javascript权威指南</p>
<p>¥</p>
</li>
<li draggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>¥</p>
</li>
<li draggable="true">
<img src="img4.jpg" />
<p>DOM编程艺术</p>
<p>¥</p>
</li>
</ul>
<!-- 拖过来的书籍,这里动态追加,所以把测试文本注释掉 -->
<div id="div1">
<!--<p>
<span class="box1"></span>
<span class="box2">DOM编程艺术</span>
<span class="box3">¥</span>
</p>
<p>
<span class="box1"></span>
<span class="box2">DOM编程艺术</span>
<span class="box3">¥</span>
</p>
<div id="allMoney">¥</div>-->
</div>
</body>
</html>
<script> window.onload = function(){
var aLi = document.getElementsByTagName('li');//获取所有的li对象
var oDiv = document.getElementById('div1');//获取购买区域对象 var obj = {};
var iNum = ; //钱:用于计算的
var allMoney = null;//钱:带单位的 for(var i=;i<aLi.length;i++){ //遍历li以便给每个li定义拖动事件
aLi[i].ondragstart = function(ev){ var aP = this.getElementsByTagName('p');//获取拖动对象的所有P标签
//给转移数据以键值对的形式传输过去
ev.dataTransfer.setData('title',aP[].innerHTML);
ev.dataTransfer.setData('money',aP[].innerHTML); ev.dataTransfer.setDragImage(this,,);//设置拖动的时候显示的图片 };
}
<!-- dragover在拖拽期间触发,这里是组织浏览器默认事件,浏览器默认拖动图片后打开图片,阻止就不会了 -->
oDiv.ondragover = function(ev){
ev.preventDefault();
};
<!-- drop在拖拽区域时触发 -->
oDiv.ondrop = function(ev){
ev.preventDefault();
<!-- 获取发送过来的数据 -->
var sTitle = ev.dataTransfer.getData('title');
var sMoney = ev.dataTransfer.getData('money'); if( !obj[sTitle] ){ //空谁不正确,不为空则是正确的 var oP = document.createElement('p'); var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = ;
oP.appendChild( oSpan );
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = sTitle;
oP.appendChild( oSpan ); var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = sMoney;
oP.appendChild( oSpan ); oDiv.appendChild( oP ); obj[sTitle] = ; }
else{ var box1 = document.getElementsByClassName('box1');
var box2 = document.getElementsByClassName('box2'); for(var i=;i<box2.length;i++){ if(box2[i].innerHTML == sTitle){
box1[i].innerHTML = parseInt(box1[i].innerHTML) + ;
} } } if(!allMoney){
allMoney = document.createElement('div');
allMoney.id = 'allMoney';
} iNum += parseInt(sMoney); allMoney.innerHTML = iNum + '¥'; oDiv.appendChild( allMoney ); }; }; </script>

简要截图:

HTML5——购物车的更多相关文章

  1. HTML5自学笔记[ 10 ]简单的购物车拖拽

    用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...

  2. localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

    localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...

  3. 基于jQuery+HTML5加入购物车代码

    基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. HTML5 本地存储实现购物车功能

    在家休陪产假,无聊,看自己以前的项目,突然发现之前写的购物车都是用数据库实现的,数据库实现购物车原则上没什么问题,但是需要和数据库交互,这样无意之间降低了程序的效率.今天突发奇想,如果能用HTML5本 ...

  5. HTML5——同步购物车

    同步购物车,及打开两个或多个界面,选择购物时同步,让显示的内容一致,这样不至于购买出错. 核心:利用storage事件和localStorage本地存储实现 图片简单展示: <!DOCTYPE ...

  6. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  7. HTML5拖放加入购物车

    H5拖放事件巩固实例: 1.简单布局一下,商品信息放入一个ul中:div为购物车,后续会创建元素 <ul> <li draggable="true"> &l ...

  8. html5 拖放购物车

    1.本例中模仿了购物车添加的功能 主要运用了ondragstart / ondragover/ ondrag 功能 功能比较简单 遗留问题:火狐下图片拖进会被打开 <!doctype html& ...

  9. html5 拖放到购物车

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. hdu 2196 Computer(树形DP)

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  2. SQOOP Load Data from Oracle to Hive Table

    sqoop import -D oraoop.disabled=true \ --connect "jdbc:oracle:thin:@(description=(address=(prot ...

  3. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  4. openfire+asmack搭建的安卓即时通讯(一) 15.4.7

    最进开始做一些android的项目,除了一个新闻客户端的搭建,还需要一个实现一个即时通讯的功能,参考了很多大神成型的实例,了解到operfire+asmack是搭建简易即时通讯比较方便,所以就写了这篇 ...

  5. Hadoop_YARN框架

    Hadoop学习笔记总结 01. YARN框架 1. 新一代的框架介绍 YARN的职能就是将资源调度和任务调度分开.资源管理器ResourceManager全局管理所有应用程序计算资源的分配,每一个j ...

  6. 初始化 Ubuntu Trusty 14.04

    1. 软件源 sudo vim /etc/apt/source.list # 将软件源改为 sohu 的 deb http://mirrors.sohu.com/ubuntu/ trusty main ...

  7. JS高程读书笔记-第一、二章-内附在线思维导图和quizlet卡片

    之前在kindle上买了高程,今天又到了纸质的<JavaScript语言精粹>,<高性能JavaScript>,<JavaScipt设计模式>,开始读书之旅啦. 我 ...

  8. NUL 与 NULL

    NUL 与 NULL 在C语言中,字符串表示为字符的数组.字符串最后一个字符为空字符 ('\0'),官方将其定义为 NUL ,而 NULL 是一个宏,其定义如下: #define NULL ((voi ...

  9. URAL 2014 Zhenya moves from parents --线段树

    题意:儿子身无分文出去玩,只带了一张他爸的信用卡,当他自己现金不足的时候就会用信用卡支付,然后儿子还会挣钱,挣到的钱都是现金,也就是说他如果有现金就会先花现金,但是有了现金他不会还信用卡的钱.他每花一 ...

  10. 配置 AEM CQ6 (author + publish + apache dispatcher + ubuntu )

      AEM CQ系列是Adobe下的企业内容管理系统,现在已知的一些企业比如 Deloitte,Ford Racing,这里就不多做基本的介绍了,明白的看! 今天在Docker配置一下author i ...