html5 drop drag实现购物车加入书

来源：互联网发布：wow 1.12数据库编辑：程序博客网时间：2024/06/10 01:55
忘记用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.ondragover=function(e){            e.preventDefault();        }        document.ondrop=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 onload="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>
说实话拽的时候位置挺不好控制的
0 0