1.本例中模仿了购物车添加的功能

主要运用了ondragstart / ondragover/ ondrag 功能

功能比较简单

遗留问题：火狐下图片拖进会被打开

<!doctype html>

<html>

<head>

<meta charset="utf-8">

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

<style>

    body,ul,img,p{margin:0;padding:0;}

    li{list-style:none;}

    li{float:left;width:200px;margin:10px;border:1px solid #000;height:300px;}

    li img{width:200px;height:250px;}

     p{height:20px;border-bottom:1px dashed #666;}

    #div1{clear:both;width:600px;height:400px;border:1px solid #000;margin:20px;}

    .box1{float:left;width:200px;}

    .box2{float:left;width:200px;}

    .box3{float:left;width:200px;}

    #allMoney{float:right;}

</style>

<script>

    window.onload = function(){

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

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

        var obj = {};

        var oMoney = null;

        var iNum = 0;

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

            aLi[i].ondragstart = function(ev){

                var ev = ev || window.event;

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

            var ev = ev || window.event;

            ev.preventDefault(); //如果想要实现drop功能 必须组织默认事件

        };

        oDiv.ondrop = function(ev){

            var ev = ev || window.event;

            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 arrBox1 = document.getElementsByClassName('box1');

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

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

                    if(arrBox2[i].innerHTML == sTitle){

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

                        break;

                    }

                }

            }

            if(!oMoney){

                oMoney = document.createElement('div');

                oMoney.id = 'allMoney';

            }

            iNum += parseInt(sMoney);

            oMoney.innerHTML = iNum +'￥';

            oDiv.appendChild(oMoney);

        };

    };

</script>

</head>

<body>

<ul>

    <li draggable="true">

        <img src="data:image/img1.jpg"/>

        <p>javascript语言精粹</p>

        <p>40￥</p>

    </li>

   <li draggable="true">

        <img src="data:image/img2.jpg"/>

        <p>javascript权威指南</p>

        <p>120￥</p>

    </li>

    <li draggable="true">

        <img src="data:image/img3.jpg"/>

        <p>精通javascript</p>

        <p>50￥</p>

    </li>

    <li draggable="true">

        <img src="data:image/img4.jpg"/>

        <p>DOM编程艺术</p>

        <p>70￥</p>

    </li>

</ul>

<div id="div1">

<!--  <p>

        <span class="box1">1</span>

        <span class="box2">DOM编程艺术</span>

        <span class="box3">45￥</span>

   </p>

   <p>

        <span class="box1">1</span>

        <span class="box2">DOM编程艺术</span>

        <span class="box3">45￥</span>

   </p>

   <p>

        <span class="box1">1</span>

        <span class="box2">DOM编程艺术</span>

        <span class="box3">45￥</span>

   </p>

   <div id="allMoney">90￥</div>-->

</div>

</body>

</html>

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

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

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

  2. HTML5 拖放

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

  3. HTML5拖放API

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

  4. HTML5拖放

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

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

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

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

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

  7. 基于jQuery+HTML5加入购物车代码

    基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

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

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

  9. HTML5: HTML5 拖放

    ylbtech-HTML5: HTML5 拖放 1.返回顶部 1. HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分.   将 RUNOOB.C ...

随机推荐

  1. 1022 D进制的A+B (20 分)

    题目:1022 D进制的A+B (20 分) 思路: 首先根据A.B的取值范围,可知A+B不过2^31,所以转换成进制数时的最长长度为31. 转换成进制的数存进数组,然后反向输出. 要注意和为0的情况 ...

  2. Skipping MapperFactoryBean with name 'sysUserMapper' and 'com.buding.system.mapper.SysUserMapper' mapperInterface. Bean already defined with the same name!

    前几天整体看了一下SpringBoot的简介,觉得看不如自己动手做,于是动手做一个简单的用户管理.启动的时候遇到了Skipping MapperFactoryBean with name 'sysUs ...

  3. java异常分析；剖析printStackTrace和fillInStackTrace

    Java异常的栈轨迹(Stack Trace) 捕获到异常时,往往需要进行一些处理.比较简单直接的方式就是打印异常栈轨迹Stack Trace.说起栈轨迹,可能很多人和我一样,第一反应就是printS ...

  4. 【JVM】面试题之死锁及问题是怎么定位

    前言 之前面试的时候被问到死锁这块的问题,借着最近学习jvm来总结下死锁相关的知识.如果有地方写的不到位的地方,麻烦读者及时提出,放在评论区,我这边也好及时改正. 回顾 所谓,温故而知新,首先回顾下, ...

  5. 用数组实现队列（C++）

    #include <iostream> using namespace std; template<typename T, int size = 0> class Queue ...

  6. Nginx笔记总结十八:nginx统计响应的http状态码信息（ngx-http-status-code-counter）

    编译:./configure --prefix=/usr/local/nginx --add-module=../ngx_http_status_code_counter-master make &a ...

  7. 科学家用AI看月球后，却发现了这些东西

    ​​人工智能(AI)几乎已经无所不在,我们生活的大多数方面都已经被它们渗透,随着AI在过去几年取得的令人震惊的进步,它在许多方面都可能帮助我们的生活变得更美好.近日,AI在月球上发现了近7000个未被 ...

  8. Spark和Hadoop MapReduce之间的比较

    关于两者的讨论文章: https://www.zhihu.com/question/26568496 http://blog.jobbole.com/97150/ 文章通过多个角度对两者进行对比,根据 ...

  9. Mac 环境docker 安装jenkins

    网上很多的教程是讲的是Linux 上的Docker安装Jenkins,但是我用的是Mac,所以参考之前的前辈写的文章,记录一下自己的安装过程.非常感谢参考文章的前辈写的文章. 参考Docker安装Je ...

  10. JAVA9中文API百度网盘免费下载

    JAVA9中文API百度网盘免费下载: https://pan.baidu.com/s/1tvHYQA8yyAS4xUFxwWrx_Q 提取码: 6e5h