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. SQL中的一些关键字用法

    1.where 条件筛选结果 select * from `表名` where `列名`='value' 上诉语句的意思是在某表中查询某列名等于某特定值得所有列 2.Like 模糊查询 select ...

  2. 批量修改ACCESS表列名

    问题来源:从ODBC导入数据到ACCESS 再从ACCESS导入到SQL数据库,ACCESS会多带个DBO. 所以需要批量修改ACCESS的表名. 首先需要引用ADOX引用方法:打开ACCESS的VB ...

  3. Linux查看后台任务，关闭后台任务

    jobs查看后台任务, kill %num关闭相应的后台任务

  4. 测试误区《二》 python逻辑运算和关系运算优先级

    关系运算 关系运算就是对2个对象进行比较,通过比较符判断进行比较,有6种方式. x > y 大于 x >= y 大于等于 x < y 小于 x <= y 小于等于 x = y ...

  5. Web窗体--控件

    服务器基本控件:button: text属性linkbutton:text属性,它是一个超链接模样的普通buttonhyperlink: navigateurl:链接地址,相当于<a>标签 ...

  6. App Store成绞肉机 让创业者止步

    Store成绞肉机 让创业者止步" title="App Store成绞肉机 让创业者止步"> 曾几何时,苹果App Store一直被称之为创业者的天堂.似乎只要灵 ...

  7. 腾讯玩O2O手机维修 巨头入局引市场大变

     巨头入局引市场大变" title="腾讯玩O2O手机维修 巨头入局引市场大变">     对于"游击队"或初创企业来说,最怕的就是巨头的杀入. ...

  8. console.log添加样式及图片

    console.log在控制台打出css样式的文字及图片 谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档 Format Specifier %s Formats the val ...

  9. Flask admin Flask login 整合模板

    项目地址: https://github.com/WES6/supflask Flask admin 官方文档: https://flask-admin.readthedocs.io/en/lates ...

  10. MIUI 7 会是小米的救命稻草吗？

    7 会是小米的救命稻草吗?" title="MIUI 7 会是小米的救命稻草吗?"> 花无百日红,人无千日好.再绚烂的曾经,或许一朝不慎,就会成为过去.在科技圈,诺 ...