h5新特性拖拽购物车

最新推荐文章于 2022-04-18 14:41:00 发布

难瘦不难过

最新推荐文章于 2022-04-18 14:41:00 发布

阅读量624

点赞数

分类专栏： h5 文章标签： js

本文链接：https://blog.youkuaiyun.com/osweet12345678/article/details/52401484

版权

h5 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何使用HTML5的新特性实现一个简单的购物车拖拽功能。通过JavaScript处理拖放事件，允许用户将商品从列表拖放到购物车中，并实时更新购物车总价。示例包括了HTML结构、CSS样式和JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>