<!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. 自动化测试之python安装

    1.首先访问http://www.python.org/download/去下载最新的python版本. 2.安装下载包,一路next. 3.为计算机添加安装目录搭到环境变量,如图把python的安装 ...

  2. [51NOD1127]最短的包含字符串（尺取法）

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1127 思路:尺取法,一开始我考虑更新右指针,直到遇到一个和l指 ...

  3. linux学习之centos（二）：虚拟网络三种连接方式和SecureCRT的使用

    ---操作环境--- 虚拟机版本:VMware Workstation_10.0.3 Linux系统版本:CentOS_6.5(64位) 物理机系统版本:win10  一.虚拟网络三种连接方式 当在V ...

  4. 转载 近期微博吐槽言论存档，涉及“性能优化”、C++陋习等

    http://blog.csdn.net/solstice/article/details/9923615 近期微吐槽博言论存档,涉及“性能优化”.C++陋习等 写C++程序的几个陋习:class 名 ...

  5. RIA技术

    Rich Internet Application(富互联网应用程序,简称RIA),一种全新的Web应用程序架构,它结合了桌面软件良好的用户体验和web应用程序易部署的优点,很快获得了企业的青睐. 近 ...

  6. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  7. php字符串与正则表达式试题 Zend权威认证试题讲解

    字符串是PHP的“瑞士军刀”——作为一种Web开发语言,PHP最常打交道的就是字符串.因此对于开发者来说,处理字符串是一项非常基础的技能.幸运的是,由于PHP开发团队的努力,PHP对字符串的处理相当易 ...

  8. ecshop 分类树全部显示

    1.在page_header.lbi文件中加入 $GLOBALS['smarty']->assign('categories',get_categories_tree()); // 保证首页页面 ...

  9. LSTM网络（Long Short-Term Memory ）

    本文基于前两篇 1. 多层感知机及其BP算法(Multi-Layer Perceptron) 与 2. 递归神经网络(Recurrent Neural Networks,RNN) RNN 有一个致命的 ...

  10. SSH思路

    hibernate的配置写到spring的配置中,用spring管理和调用hibernate的工厂和session等.struts的话,通常有2中.一种是用spring中的一个工厂类代替struts的 ...