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. jquery框架概览(一)

    参照jQuery 2.0.3版本(http://files.cnblogs.com/files/snoy/jquery-2.0.3.js")来进行的源码分析 从代码的最外层可以看到是一个II ...

  2. linux更改系统ulimit

    https://jingyan.baidu.com/article/c85b7a64b65d8c003aac957e.html

  3. com.spotify:docker-maven-plugin 报localhost:2375 Connection refused 错误

    当用maven build项目时出现了如下错误: Failed to execute goal com.spotify:docker-maven-plugin:0.4.13:build (defaul ...

  4. 分布式Web服务器架构（通俗易通）

    最开始,由于某些想法,于是在互联网上搭建了一个网站,这个时候甚至有可能主机都是租借的,但由于这篇文章我们只关注架构的演变历程,因此就假设这个时候已经是托管了一台主机,并且有一定的带宽了,这个时候由于网 ...

  5. [LC] 235. Lowest Common Ancestor of a Binary Search Tree

    Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...

  6. IO流文件拷贝

    目录 IO流文件拷贝 前言 字节流(使用FileInputStream和FileOutputStream读取每一个字节...) 字节流(使用FileInputStream和FileOutputStre ...

  7. IO流框架

    目录 IO流框架总结 字节流 字符流 IO流框架总结 普通IO / NIO 字节流 字节流是万能流,但是在处理字符方面有时候不太方便,一般用来处理二进制文件 字节输入流 InputStream int ...

  8. python的列表list和集合set操作

    以下是一些python的list和set的基本操作 1.list的一些操作 list = [1, 2, 3] list.append(5) print(list) list.extend([7, 8] ...

  9. Hibernate中的对象图关系转换：游离、持久、自由状态

  10. [转]<版本二>写代码的小女孩

    天冷极了,下着雪,又快黑了.这是一年的最后一天——大年夜.在这又冷又黑的晚上,一个乖巧的小女孩在机房里调试程序.她从家里出来的时候还穿着一件外套,但是有什么用呢?那是一双很大的外套——那么大,不知是哪 ...