<!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. BZOJ 2752 高速公路(road)（线段树）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2752 题意:给出一个数列A,维护两种操作: (1)将区间[L,R]之内的所有数字增加de ...

  2. 头文件中的#ifndef/#define/#endif 的作用

    在一个大的软件工程里面,可能会有多个文件同时包含一个头文件,当这些文件编译链接成一个可执行文件时,就会出现大量重定义的错误.在头文件中实用#ifndef #define #endif能避免头文件的重定 ...

  3. c#换ip代理源码

    很多朋友都想如何提高自己的网站流量,可是都没有什么好的办法 经过很长时间的研究,在C#中实现了,当然了,这部分代码其中一部分是网上的,不是原创. using System; using System. ...

  4. tc srm 632 500 (规律)

    We have a sequence of N positive integers: a[0] through a[N-1]. You do not know these integers. All ...

  5. JS function的定义方法，及function对象的理解。

    废话篇: 今天看到了Function的内容,各种晕,各种混淆有木有.简直是挑战个人脑经急转弯的极限啊.不过,最终这一难题还是被我攻克了,哇咔咔.现在就把这东西记下来,免得到时候又忘了就悲催了.... ...

  6. 【笨嘴拙舌WINDOWS】键盘消息，鼠标消息

    键盘消息 Windows系统无论何时只有一个窗口(可能是子窗口,也就是控件)能获得焦点. 焦点窗口通过windows消息来响应人的键盘操作,与键盘相关的常用消息罗列如下: WM_KEYDOWN   按 ...

  7. Qt之HTTPS登录

    简述 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP ...

  8. UVa 12174 (滑动窗口) Shuffle

    首先预处理一下以每个数为结尾的前s个数是否能构成一个1~s的排列. 可以用cnt数组来记录每个数出现的次数和用一个变量记录一共有多少个不同的数出现. 然后枚举每种可能的情况,也就是枚举第一首歌会出现的 ...

  9. POJ 2983 Is the Information Reliable? 信息可靠吗 （差分约束，spfa）

    题意:有n个站排成一列,针对每个站的位置与距离关系,现有多个约束条件,约束条件分两种:(1)确定的.明确说明站a距离站b多少个单位距离.(2)不确定的.只知道a在b的左边至少1个单位距离.  根据已知 ...

  10. 学习java之利用泛型访问自己定义的类

    如果有多个类,而且他们其中有一些方法是相同的,我是选择在每个类中都把这些方法实现一遍呢,还是选择泛型.我今天自己花了一点时间看了看泛型,实践了一下. Holder.java package regex ...