简要代码：

<!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. xamarin.android之 Android 4.4+ 获取图片真实路径

    Android 4.4以下 选择图片是可以获取到图片路径的.高于Android 4.4获取图片路径只是获取到一个图片编号. 所以需要针对Android版本进行路径解析: #region 高于 v4.4 ...

  2. Webshell实现与隐藏探究

    一.什么是webshell webshell简介 webshell,顾名思义:web指的是在web服务器上,而shell是用脚本语言编写的脚本程序,webshell就是就是web的一个管理 工具,可以 ...

  3. ssis trainning

    1. 防止包打开后hang住,可以使用delay validation=false. 2.2008R2 configuration 起作用的优先级? 一是des ign time. 二是运行的时候指定 ...

  4. 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

    效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...

  5. Android开发环境搭建（转）

    转载:http://www.cnblogs.com/zoupeiyang/p/4034517.html#1 引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想 ...

  6. 搜索服务solr 一二事(1) - solr-5.5 使用自带Jetty或者tomcat 搭建单机版搜索服务器

    solr,什么是solr,就是你要吃的东西“馊了”,不能吃了,out of date~ 嘛...开个玩笑,发音就是‘搜了’,专门用于搜索的一个开源框架,lunce就不说了,不好用,麻烦 来讲讲solr ...

  7. Android UI组件----ListView列表控件详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  8. Android配置----Android开发环境搭建

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  9. C++基础笔记（三）C++面向对象

    C++类 C++类与结构体类似 定义 class 类名{ <成员定义>; ........ }; 文件格式 *.mm 支持 C/C++ *.cpp C++源文件 *.h C++头文件   ...

  10. MySQL基础 - 编码设置

    刚开始工作的时候,在工作中遇到的与数据库相关的问题,多半跟编码有关,总结一下数据库编码的设置. 字符集 查看数据库支持的字符集: mysql> SHOW CHARACTER SET; 从图中可以 ...