快捷導(dǎo)航

JS實(shí)現(xiàn)的簡(jiǎn)單拖拽購(gòu)物車功能示例【附源碼下載】

更新時(shí)間：2018年01月03日 10:51:19 作者：強(qiáng)強(qiáng)強(qiáng)子

這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單拖拽購(gòu)物車功能,涉及javascript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,并附帶完整實(shí)例源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)的簡(jiǎn)單拖拽購(gòu)物車功能。分享給大家供大家參考，具體如下：

<html>
<head>
<meta charset="utf-8" />
<title>使用拖放API將商品拖入購(gòu)物車</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);
}
//自定義頁(yè)面加載時(shí)調(diào)用的函數(shù)
function pageload() {
  //獲取全部的圖書(shū)商品
  var Drag = document.getElementsByTagName("img");
  //遍歷每一個(gè)圖書(shū)商品
  for (var intI = 0; intI < Drag.length; intI++) {
    //為每一個(gè)商品添加被拖放元素的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");
  //添加目標(biāo)元素的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);
}
//添加頁(yè)面的dragover事件
document.ondragover = function(e) {
  //阻止默認(rèn)方法,取消拒絕被拖放
  e.preventDefault();
}
//添加頁(yè)面drop事件
document.ondrop = function(e) {
  //阻止默認(rèn)方法,取消拒絕被拖放
  e.preventDefault();
}
//自定義向購(gòu)物車中添加記錄的函數(shù)
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("請(qǐng)輸入要購(gòu)買的數(shù)量",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>書(shū)名</span>
    <span>定價(jià)</span>
    <span>數(shù)量</span>
    <span>總價(jià)</span>
  </li>
 </ul>
</body>
</html>

運(yùn)行效果：