js拖拽购物车

最新推荐文章于 2019-02-22 13:28:18 发布

强强强子

最新推荐文章于 2019-02-22 13:28:18 发布

阅读量1.7k

点赞数 1

分类专栏： HTML5 JavaScript

本文链接：https://blog.csdn.net/sinat_25926481/article/details/52795087

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML5

9 篇文章 0 订阅

订阅专栏

案例下载地址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>