<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

*{

    margin:0px;

    padding:0px;

    }

img{

    width:300px;

    height:200px;

    margin:9px;

    }

li{

    border:1px solid #333;

    width:320px;

    margin:9px;

    float:left;

    list-style-type:none;

    }

p{

    text-align:center;

    }

#div1{

    margin:0 auto;

    width:1200px;

    border:1px dashed #666666;

    height:300px;

    clear:both;

    }

.box1{

    width:400px;

    float:left;

    }

.box2{

    width:400px;

    float:left;

    }

.box3{

    width:400px;

    float:left;

    }

#allMoney{

    float:right;

    }

</style>

<script>

window.onload = function ()

{

    var odiv = document.getElementById('div1');

    var ali = document.getElementsByTagName('li');

    var obj = {};

    var allMoney = null;

    var inum = 0;

    for(var i = 0; i < ali.length; i++)

    {

        ali[i].ondragstart = function (ev)

        {

            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);

        }

    }

    odiv.ondragover = function (ev)

    {

        ev.preventDefault();

    }

    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 = 1;

            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] = 1;

        }

        else

        {

            var box1 = document.getElementsByClassName('box1');

            var box2 = document.getElementsByClassName('box2');

            for(var i = 0; i < box2.length; i++)

            {

                if(box2[i].innerHTML == stitle )

                {

                    box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;

                }

            }

        }

        if(!allMoney)

        {

            allMoney = document.createElement('div');

            allMoney.id = 'allMoney';

        }

        inum += parseInt(smoney);

        allMoney.innerHTML = inum + '$';

        odiv.appendChild(allMoney);

    }

}

</script>

</head>

<body>

<ul>

    <li draggable="true">

        <img src="img/5-1.jpg">

        <p>美丽地方</p>

        <p>1000$</p>

    </li>

    <li draggable="true">

        <img src="img/5-2.jpg">

        <p>美丽地方2</p>

        <p>2000$</p>

    </li>

    <li draggable="true">

        <img src="img/5-3.jpg">

        <p>美丽地方3</p>

        <p>3000$</p>

    </li>

    <li draggable="true">

        <img src="img/5-4.jpg">

        <p>美丽地方4</p>

        <p>4000$</p>

    </li>

</ul>

<div id="div1">

</div>

</body>

</html>

html5 拖放到购物车的更多相关文章

  1. HTML5拖放加入购物车

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

  2. HTML5拖放（drag and drop）与plupload的懒人上传

    HTML5拖放能够将本地的文件拖放到页面上,plupload又是很好的文件上传插件,而今天就将两者结合,做了个文件拖拽上传的功能. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放 ...

  3. HTML5 拖放

    拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 I ...

  4. HTML5拖放API

    拖放事件事件提供了拖放可以控制几乎所有方面的拖放操作.棘手的部分是确定每个事件触发:在拖项目火:别人火下降的目标.拖动项时,以下事件(按照这个顺序): 拖曳开始拖dragend此刻你把鼠标按钮和开始移 ...

  5. HTML5拖放

    HTML5拖放 <!doctype html> <html> <head> <meta charset="UTF-8"> <t ...

  6. HTML5 拖放及排序的简单实现

    HTML5 拖放及排序的简单实现 之前写过个类似的例子,看这里. 但想再深入一步,希望能通过拖放,来交换二个元素的位置.最好有应用到手机平台上. 作了个简单的例子,在手机上测试的时候不成功..查了好多 ...

  7. HTML5 拖放（Drag 和 Drop）功能开发——基础实战

    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...

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

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

  9. 【Demo】HTML5拖放--简单demo

    用HTML5拖放功能编写一个简单的拖放Demo 单次拖放demo 效果: ------拖放前------- ------拖放后-------  实现代码: <!DOCTYPE html> ...

随机推荐

  1. MySQL之Join

    参见MySQL(以5.1为例)中官方手册:MySQL官方手册-JOIN 假设有以下几个表 t1 id book 1 java 2 c++ 3 php t2 id author 2 zhang 3 wa ...

  2. Linux 总结1

    ============================= 一般 ========================================= chown -R oracle:oinstall ...

  3. 如何停止Android Monkey脚本

    如何停止Android Monkey脚本 最近用monkey来包apk的性能测试,发现一旦monkey跑起来以后,即使将数据线和PC断开,monkey脚本还是会继续运行下去.结果找到了一个办法去停止它 ...

  4. sqlserver重命名字段名称

    EXEC sp_rename 'S2BASE_PRODUCT.[PRODUCT_ID]','TABTYPE_ID','COLUMN';

  5. JQuery_给元素添加或删除类等以及CSS()方法

    一.addClass() - 向被选元素添加一个或多个类 <script src="jquery-1.11.1.min.js"></script> < ...

  6. [xUnix 开发环境--01] MAMP mac os 10.10 配置经历、要点——01. phpmyadmin连不上

    Mac OS 10.10已经自带了apache2和php(php的路径我至今还没不知道,太懒没去找) 用brew安装mysql, 在官网上下载了phpmyadmin,按官方方式配置完后,登录不上,也不 ...

  7. Servlet 3.0 之@WebFilter怎么控制多个filter的执行顺序

    之前我们控制多个filter的执行顺序是通过web.xml中控制filter的位置来控制的,放在上面的会比放在下面的先执行,如下“用户登录检查过滤器”会比“接口日志过滤器”先执行   <!-- ...

  8. Python argparse

    http://songpengfei.iteye.com/blog/1440158 https://docs.python.org/2/library/argparse.html http://sta ...

  9. UTF8存储与显示

    存储肯定是二进制存储,同一个字符(汉子)在不同的字符集下有对应的值,一个字符集相当于一个密码表,键名为字符,键值为二进制数(可表示为十进制,十六进制) UTF8是一个unicode字符集的编码规则,也 ...

  10. RequireJS 2.0 正式发布（转）

    RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0 ...