本文实例讲述了js实现的简单拖拽购物车功能。分享给大家供大家参考，具体如下：
我要评论
<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>
运行效果：
附：完整实例代码点击此处。
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论