JS实现的简单拖拽购物车功能示例【附源码下载】

程序员文章站 2022-06-24 23:06:54

本文实例讲述了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>

运行效果：