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. web前端校招笔试题集锦

    写一个求和的函数sum,达到下面的效果 // Should equal 15 sum(1, 2, 3, 4, 5); // Should equal 0 sum(5, null, -5); // Sh ...

  2. JavaScript学习总结（三）BOM和DOM详解

    转自:http://segmentfault.com/a/1190000000654274 DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西 ...

  3. t-检验

    https://wenku.baidu.com/view/3954f9d9a58da0116c17497b.html介绍的挺好的,可以查看~ 应用方面:用于推断差异发生的概率,与f检验,卡方检验并列 ...

  4. caffe之android移植

    获取Android手机CPU类型 ARM.ARMV7.NEON:http://blog.csdn.net/mengweiqi33/article/details/22796619 android nd ...

  5. （四）mybatis缓存、事务、插件的基本知识

    mybatis缓存.事务.插件的基础 一.缓存 (一)一级缓存与二级缓存 一级缓存 为了获得更好的性能,最重要的就是一级缓存.每个session对象维持一个一级缓存,session对象创建时缓存创建, ...

  6. JavaScript 中事件对象参数：clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  7. 我在linux的第一个C程序

    今天在虚拟机装起了linux,根据大家学习所需要,可以安装自己喜欢的版本,我这里装的是centos 7.0版本,也正是学习的开始,现在来看看简洁大气的centos界面吧:     在centos编译C ...

  8. <SCOI2005>互不侵犯の思路

    日常玄学dp #include<cstdio> #include<cstring> #include<iostream> #include<algorithm ...

  9. 转：zabbix 更改maps图标

    更改Zabbix map图标 Zabbix的maps用来图形化显示监控设备的拓扑图,并且以不同的标记显示故障事件,通过该图表很直观的显示设备的整体情况.系统默认的图标比较简陋,如图十一所示.通过更改系 ...

  10. java反序列化-ysoserial-调试分析总结篇(2)

    前言: 这篇主要分析commonCollections2,调用链如下图所示: 调用链分析: 分析环境:jdk1.8.0 反序列化的入口点为src.zip!/java/util/PriorityQueu ...