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. Linux安装swoole拓展 (一键安装lnmp后安装可用完美)

    一键安装lnmp后安装可用完美 swoole(一键安装完lnmp重启下,之前出现502一直解决不了,不清楚啥情况) 找到对应php版本,在lnmp文件夹的src 1.安装swoole cd /usr/ ...

  2. mudbox卸载/完美解决安装失败/如何彻底卸载清除干净mudbox各种残留注册表和文件的方法

    在卸载mudbox重装mudbox时发现安装失败,提示是已安装mudbox或安装失败.这是因为上一次卸载mudbox没有清理干净,系统会误认为已经安装mudbox了.有的同学是新装的系统也会出现mud ...

  3. MyBatis学习笔记一:MyBatis最简单的环境搭建

    MyBatis的最简单环境的搭建,使用xml配置,用来理解后面的复杂配置做基础 1.环境目录树(导入mybatis-3.4.1.jar包即可,这里是为后面的环境最准备使用了web项目,如果只是做 my ...

  4. PowerDesigner的文章

    来自iteye的PowerDesigner的相关文章,写的不错,这里引用一下 PD12 建模工具的使用 博客分类: PowerDesigner .net http://jpkc.zjbti.net.c ...

  5. Java实现Luhm算法--银行卡号合法性校验

    银行卡是由"发卡行标识代码 + 自定义 + 校验码 "等部分组成的. 银联标准卡与以往发行的银行卡最直接的区别就是其卡号前6位数字的不同.   银行卡卡号的前6位是用来表示发卡银行 ...

  6. sitemesh 使用方法

    一.简介 SiteMesh是一个网页布局和修饰的框架,利用它可以将网页的内容和页面结构分离,以达到页面结构共享的目的. 它能通过创建一个包装对象,也就是装饰来包裹的对象.尽管它是由Java语言来实现的 ...

  7. YY孵化虎牙，陌陌收购探探：你更看好谁？

    近日欢聚时代公布了2017第四季财报和全年财报,表现不错.其CFO 金秉表示,虎牙最近向美国证券交易委员会(SEC)提交了注册上市申请书草案文件,可能会在美国IPO上市,以便获取自己的投资者群体以融资 ...

  8. 网络编程OSI介绍

    网络编程 软件开发架构 c/s架构(client/server) c:客户端 s:服务端 客户端和服务器端架构,这种架构是从用户层划分的,一般客户端就是在用户电脑上安装的应用程序,而服务端就是公司里的 ...

  9. 将java project打包成jar包，web project 打包成war包的几种演示

    将java项目打包成jar 第一种:MyEclipse将java项目打包成jar. 1,右击项目,选择export . 2,点击Java,选择JAR file . 3,在JAR file文本中浏览打包 ...

  10. IBM Developer：Java 9 新特性概述

    Author: 成富 Date: Dec 28, 2017 Category: IBM-Developer (20) Tags: Java (27) 原文地址:https://www.ibm.com/ ...