js拖拽购物车

来源：互联网发布：手机弹古琴软件编辑：程序博客网时间：2024/05/17 06:57
案例下载地址http://download.csdn.net/detail/sinat_25926481/9651536
<html><head><meta charset="utf-8" /><title>使用拖放API将商品拖入购物车</title><style>body {font-size:12px}.liT{border-bottom:solid 1px #ccc;background-color:#eee;    font-weight:bold}.liF{float:left;margin-right:5px;}ul{list-style-type:none;padding:0px;height:106px;width:330px}ul li{height:23px}ul li img{width:68px;height:96px;border:solid 1px #ccc;padding:3px}ul li span{float:left;width:70px;padding:5px;}</style><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++) {//为每一个商品添加被拖放元素的dragstart事件        Drag[intI].addEventListener("dragstart",        function(e) {            var objDtf = e.dataTransfer;                        objDtf.setData("text/html", addCart(this.title, this.alt, 1));        },        true);    }    var Cart = $$("ulCart");//添加目标元素的drop事件    Cart.addEventListener("drop",    function(e) {        var objDtf = e.dataTransfer;        var strHTML = objDtf.getData("text/html");        var num=top_();        Cart.innerHTML += strHTML;        document.getElementById("num").innerHTML=num;        var price =document.getElementById("price").innerHTML;        document.getElementById("sum").innerHTML=num*price;        e.preventDefault();        e.stopPropagation();    },    false);}//添加页面的dragover事件document.ondragover = function(e) {//阻止默认方法,取消拒绝被拖放    e.preventDefault();}//添加页面drop事件document.ondrop = function(e) {//阻止默认方法,取消拒绝被拖放    e.preventDefault();}//自定义向购物车中添加记录的函数function addCart(a, b, c) {    var strHTML = "<li class='liC'>";    strHTML += "<span>" + a + "</span>";    strHTML += "<span id=\"price\">" + b + "</span>";    strHTML += "<span id=\"num\">" + c + "</span>";    strHTML += "<span id=\"sum\">" + b * c + "</span>";    strHTML += "</li>";    return strHTML;}//提示输入框function top_(){  var str=prompt("请输入要购买的数量",1);        return str;}</script></head><body onLoad="pageload();">   <ul>    <li class="liF">        <img src="images/img02.jpg" id="img02"              alt="42" title="2006作品" draggable="true">         </li>    <li class="liF">        <img src="images/img03.jpg" id="img03"              alt="56" title="2008作品" draggable="true">    </li>    <li class="liF">        <img src="images/2.jpg" id="img04"              alt="52" title="2010作品" draggable="true">    </li>    <li class="liF">        <img src="images/1.jpg" id="img05"              alt="59" title="2011作品" draggable="true">    </li>  </ul>  <ul id="ulCart">    <li class="liT">        <span>书名</span>       <span>定价</span>       <span>数量</span>       <span>总价</span>    </li>  </ul></body></html>
0 0