<!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. 阿里云yum源

    wget -O /etc/yum.repos.d/CentOS-Base-aliyun.repo http://mirrors.aliyun.com/repo/Centos-6.repo 参考:htt ...

  2. combobox远程加载数据的总结和Json数据的小结

    1.从后台返回请求加载Combobox下拉框数据 html部分1 <select name="mateBelongZ" id="mateBelongZID" ...

  3. git大文件管理

    由于git在每一个commit时都会变动过的文件全部保存(不像其他的系统,只做文件增量存储),外加未变动文件的引用,这样如果在文件系统中有一些大的二进制文件,比如图片,视频,那么很快你的repo就将变 ...

  4. web开发workflow

    web development是一个创建和实施一个新的互联网展示的过程,web网站可以是个非常成熟包罗万象的网站,也可以只是一个blog或者一两个页面.如果未做好充分的准备,web开发将是一个非常复杂 ...

  5. [ionic开源项目教程] - 第15讲 ionic用户个人中心登录注册的实现

    第15讲 ionic用户个人中心登录注册的实现 这一讲包括登陆.注册.个人中心.个人资料页面的实现. 在一讲的改动有四个地方: 在config.js里配置接口地址 完善个人中心的服务层(service ...

  6. 如何在Android studio中同时打开多个工程？ (转载)

    最近学习Android Studio,想同时打开两个Project.但是点击File->Open之后,原有的Project被关闭掉了.怎么在新的窗口中打开Project呢? 解决: 点击Help ...

  7. UVa 10250 The Other Two Trees

    还是读了很长时间的题,不过题本身很简单. 可以把四棵树想象成正方形的四个顶点,已知两个相对顶点的坐标,求另外两个坐标. 不过,原题可没直接这么说,中间需要一些小证明. 题中说有一个平行四边形然后分别以 ...

  8. 51nod1346 递归

    我终于知道我有多么蠢了...推规律根本不带我这么推的...跟51nod那场比赛的傻逼B题一样,想都不想想就打表找规律...智障啊找规律也要按照基本法! //f[1][2]=a[1][2] f[2][1 ...

  9. UIView的user Interaction Enabled属性

    A Boolean value that determines whether user events are ignored and removed from the event queue. 译: ...

  10. Fragment的知识总结

    1. Fragment概念及作用. 以下是使用Fragment提供思路 2. 创建继承于 Fragment的类:(可extends Fagment 或  ListFagment) 注意导包:如果考虑兼 ...