h5新特性拖拽购物车

来源：互联网发布：苹果mac镜像下载iso 编辑：程序博客网时间：2024/06/09 15:59
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{margin: 0;padding: 0;}        li{list-style: none;}        li{float: left;width:200px;border:1px solid #000;margin: 10px;}        li img{width: 200px;}        p{border-bottom: 1px dashed #333; height: 20px;}        #div1{width:600px;border:1px #000 solid;height: 300px;clear: left;}        .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 iNum=0;            var allMoney=null;            for(var i=0;i<aLi.length;i++){                aLi[i].ondragstart=function(ev){                    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){                ev.preventDefault();            }            oDiv.ondrop=function(ev){                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 box1=document.getElementsByClassName('box1');                    var box2=document.getElementsByClassName('box2');                    for(var i=0;i<box2.length;i++){                        if(box2[i].innerHTML==sTitle){                            box1[i].innerHTML=parseInt(box1[i].innerHTML)+1;                        }                    }                }                if(!allMoney){                    allMoney=document.createElement('div');                    allMoney.id='allMoney';                }                iNum +=parseInt(sMoney);                allMoney.innerHTML=iNum+'￥';                oDiv.appendChild(allMoney);            }        }    </script></head><body><ul>    <li draggable="true">        <img src="img/img1.jpg">        <p> Javascript语言</p>        <p>40￥</p>    </li>    <li draggable="true">        <img src="img/img2.jpg">        <p> Javascript权威指南</p>        <p>42￥</p>    </li>    <li draggable="true">        <img src="img/img3.jpg">        <p> 精通js</p>        <p>43￥</p>    </li>    <li draggable="true">        <img src="img/img4.jpg">        <p>DOM编程艺术</p>        <p>44￥</p>    </li></ul><div id="div1">    <!--<p>-->        <!--<span class="box1">1</span>-->        <!--<span class="box2">DOM编程艺术</span>-->        <!--<span class="box3">40</span>-->    <!--</p>-->    <!--<p>-->        <!--<span class="box1">2</span>-->        <!--<span class="box2">DOM编程艺术</span>-->        <!--<span class="box3">40</span>-->    <!--</p>-->    <!--<div id="allMoney">$80</div>--></div></body></html>
0 0