拖拽之实例购物车

来源：互联网发布：java与传感器通信编辑：程序博客网时间：2024/06/06 06:58
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>购物车</title>    <style type="text/css">        *{margin: 0;padding: 0px;}        li{list-style: none;}        li{width: 200px;float: left;margin: 10px;border: 1px solid #ddd}        li img{width: 200px}        p{height: 20px; border-bottom: 1px #333 dashed}        #div1{width: 600px;border: 1px solid #000;height: 300px;clear:both}        .box1{float: left;width: 200px;}        .box2{float: left;width: 200px;}        .box3{float: left;width: 200px;}        #allMoney{float: right;}    </style>    <script type="text/javascript">    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/book1.jpg">            <p>javascript模式</p>            <p>40$</p>        </li>        <li draggable='true'>            <img src="../img/book2.jpg">            <p>javascript经典模式</p>            <p>80$</p>        </li>        <li draggable='true'>            <img src="../img/book3.jpg">            <p>javascript启示录</p>            <p>60$</p>        </li>        <li draggable='true'>            <img src="../img/book4.jpg">            <p>javascript设计模式</p>            <p>80$</p>        </li>        <li draggable='true'>            <img src="../img/book5.jpg">            <p>javascript宝典</p>            <p>120$</p>        </li>    </ul>    <div id="div1">        <!-- <p>            <span class="box1">1</span>            <span class="box2">javascript模式</span>            <span class="box3">40$</span>        </p>        <p>            <span class="box1">1</span>            <span class="box2">javascript模式</span>            <span class="box3">40$</span>        </p>        <div id="allMoney">80$</div> -->    </div></body></html>
阅读全文
0 0