html5 drop drag实现购物车加入书

最新推荐文章于 2023-05-11 17:12:00 发布

MissZhou要努力

最新推荐文章于 2023-05-11 17:12:00 发布

阅读量549

点赞数

分类专栏：前端文章标签： html5 css

本文链接：https://blog.csdn.net/zhou_yujia/article/details/51628329

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

忘记用css美化了，丑陋的界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        function $$(id) {
            return document.getElementById(id);
        }
        function pageload(){
            var drag=document.getElementsByTagName("img");
            for(var intI=0;intI<drag.length;intI++)
            {
                drag[intI].addEventListener("dragstart",
                        function(e){
                            var objDtf=e.dataTransfer;//拖拽数据传递对象，一般使用方式event.dataTransfer
                            objDtf.setData("text/html",addCart(this.title,this.alt,1));
                        },
                        false);
            }
            var Cart=$$("ulCart");
            Cart.addEventListener("drop",
                    function(e){
                        var objDtf=e.dataTransfer;
                        var strHTML=objDtf.getData("text/html");
                        Cart.innerHTML+=strHTML;
                        e.preventDefault();
                        e.stopPropagation();
                    },false
            );
        }
        document.οndragοver=function(e){
            e.preventDefault();
        }
        document.οndrοp=function(e){
            e.preventDefault();
        }
        function addCart(a,b,c){
            var strhtml="<li class='lic'>";
            strhtml+="<span>"+" "+a+" "+"</span>";
            strhtml+="<span>"+" "+b+" "+"</span>";
            strhtml+="<span>"+" "+c+" "+"</span>";
            strhtml+="<span>"+" "+b*c+" "+"</span>";
            strhtml+="</li>";
            return strhtml;
        }
    </script>
</head>
<body οnlοad="pageload();">
    <ul>
        <li class="aa">
            <img src="2.jpg" id="img02" alt="42" title="2009" draggable="true">
            <!-- 无法显示时替代的文本 ;可拖拽 -->
        </li>
        <li class="aa">
            <img src="1.jpg" id="img03" alt="56" title="2010" draggable="true">
        </li>
        <li class="aa">
            <img src="3.jpg" id="img05" alt="59" title="2011" draggable="true">
        </li>
    </ul>
    <ul id="ulCart">
        <li class="bb">
            <span>name</span>
            <span>price</span>
            <span>number</span>
            <span>total</span>
        </li>
    </ul>
</body>
</html>

说实话拽的时候位置挺不好控制的

MissZhou要努力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 drop drag实现购物车加入书

忘记用css美化了，丑陋的界面 Title function $$(id) { return document.getElementById(id); } function pageload(){ var drag=document.getElementsByTa
复制链接

扫一扫