<!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. Codeforces Round #320 (Div. 2) D. "Or" Game 数学

    D. "Or" Game time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  2. maven3实战之仓库(快照版本)

    maven3实战之仓库(快照版本) ---------- 在Maven的世界中,任何一个项目或者构件都必须有自己的版本.版本的值可能是1.0.0,1.3-alpha-4,2.0,2.1-SNAPSHO ...

  3. jpa+spring配置多数据源

    property name="hibernate.connection.url" value="jdbc:mysql://localhost:3306/test?useU ...

  4. serialize-and-deserialize-bst

    https://leetcode.com/problems/serialize-and-deserialize-bst/ 1. 用到Java Queue接口, // LinkedList实现了Queu ...

  5. jQuery_效果(滑动)

    1.jQuery slideDown() 方法(用于向下滑动元素) 语法:$(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取 ...

  6. UVa 10161 Ant on a Chessboard

    一道数学水题,找找规律. 首先要判断给的数在第几层,比如说在第n层.然后判断(n * n - n + 1)(其坐标也就是(n,n)) 之间的关系. 还要注意n的奇偶.  Problem A.Ant o ...

  7. POJ2186 POPULAR COW

    链接:http://poj.org/problem?id=2186 题意:给你N个点,然后在给你N条有向边,然后让你找出这样的点S,S满足条件图上任意一点都能到达S. 要想满足任意一点都能到达,首先满 ...

  8. MySQL Database on Azure - 利用PowerShell快速创建使用数据库服务

    如果您的应用需要通过脚本快速创建一个或多个MySQL数据库,MySQL Database on Azure目前开放了对于PowerShell的支持,可以帮助您快速利用自动化脚本进行数据库服务的创建.管 ...

  9. python练习程序（c100经典例11）

    题目: 古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? a=1;b=1 print a,b, for i ...

  10. 内容在某div中滚动

    1.设定外层div在屏幕中的高度. 2.设置div刷新style="-webkit-overflow-scrolling: touch; overflow: scroll“