拖拽之实例购物车

最新推荐文章于 2024-08-16 23:47:01 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2024-08-16 23:47:01 发布

阅读量1k

点赞数

文章标签： html5

本文链接：https://blog.youkuaiyun.com/Aloe_904/article/details/78468217

版权

前端的尘封往事专栏收录该内容

29 篇文章

订阅专栏

本文通过HTML5的拖放API详细讲解如何创建一个实例化的购物车应用。用户可以将商品图标拖放到购物车中，实现简单直观的交互体验。涉及到的主要技术包括dragstart, dragenter, dragover, drop等事件处理。" 137675041,15471869,Java JDK安装配置指南：Windows与Linux,"['Java', '操作系统', '环境配置', '软件安装', '开发工具']

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

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