码迷,mamicode.com
首页 > Web开发 > 详细

html5 拖放购物车

时间:2018-05-21 23:07:11      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:load   ==   default   elements   ++   nsf   实现   编程   window   

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="image/img1.jpg"/>
        <p>javascript语言精粹</p>
        <p>40¥</p>
    </li>
   <li draggable="true">
        <img src="image/img2.jpg"/>
        <p>javascript权威指南</p>
        <p>120¥</p>
    </li>
    <li draggable="true">
        <img src="image/img3.jpg"/>
        <p>精通javascript</p>
        <p>50¥</p>
    </li>
    <li draggable="true">
        <img src="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 拖放购物车

标签:load   ==   default   elements   ++   nsf   实现   编程   window   

原文地址:https://www.cnblogs.com/moon-yyl/p/9069464.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!