通過拖動將商品新增到購物車效果程式碼例項

admin發表於2017-04-16

分享一段程式碼例項，它實現了通過拖動，將商品新增到購物車的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  float: left;
  width: 200px;
  border: 1px #000 solid;
  margin: 30px;
}
li{
  height: 160px;
  width: 200px;
}
p {
  height: 20px;
  border-bottom: 1px #333 dashed;
}
.div1 {
  height: 360px;
  border: 1px gray solid;
  margin: 130px auto;
  position: relative;
  overflow: hidden;
}
.div2 {
  border: 1px #000 solid;
  height: 300px;
  margin-top: 120px;
  clear: both;
}
.box1 {
  float: left;
  width: 200px;
  text-align: center;
}
.box2 {
  float: left;
  width: 200px;
  text-align: center;
}
.box3 {
  float: left;
  width: 200px;
  text-align: center;
}
.allMoney {
  float: right;
}
</style>
<script>
window.onload = function() {
  var aLi = document.getElementsByTagName('li');
  var oDiv = document.getElementsByClassName('div2')[0];
  var obj = {};
  var iNum = 0;
  var allMoney = null;
  for (var index = 0; index < aLi.length; index++) {
    aLi[index].ondragstart = function (ev) {
      var aP = this.getElementsByTagName('p');
      ev.dataTransfer.setData('title', aP[0].innerHTML);
      ev.dataTransfer.setData('money', aP[1].innerHTML);
      ev.dataTransfer.setDragImage(this, 0, 0);
    };
    oDiv.ondragover = function(ev) {
      ev.preventDefault();
    }
    oDiv.ondrop = function(ev) {
      ev.preventDefault();
      var Ltitle = ev.dataTransfer.getData('title');
      var Lmoney = ev.dataTransfer.getData('money');
      if (!obj[Ltitle]) {
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');
        oSpan.className = 'box1';
        oSpan.innerHTML = 1;
        oP.appendChild(oSpan);
        var oSpan = document.createElement('span');
        oSpan.className = 'box2';
        oSpan.innerHTML = Ltitle;
        oP.appendChild(oSpan);
        var oSpan = document.createElement('span');
        oSpan.className = 'box3';
        oSpan.innerHTML = Lmoney;
        oP.appendChild(oSpan);
        oDiv.appendChild(oP);
        obj[Ltitle] = 1;
      } else {
        var aBox1 = document.getElementsByClassName('box1');
        var aBox2 = document.getElementsByClassName('box2');
        for (var index = 0; index < aBox2.length; index++) {
          if (aBox2[index].innerHTML == Ltitle) {
            aBox1[index].innerHTML = parseInt(aBox1[index].innerHTML) + 1;
          }
        }
      }
      if (!allMoney) {
        allMoney = document.createElement('div');
        allMoney.className = 'allMoney';
      }
      iNum += parseInt(Lmoney);
      allMoney.innerHTML = '合計：' + iNum + '￥';
      oDiv.appendChild(allMoney);
    }
  }
}  
</script>
</head>
<body>
  <div class="div1">
    <ul>
      <li draggable="true">
        <p>javascript高階程式設計</p>
        <p>78￥</p>
      </li>
      <li draggable="true">
        <p>你不知道的javascript</p>
        <p>26￥</p>
      </li>
      <li draggable="true">
        <p>精通javascript</p>
        <p>35￥</p>
      </li>
      <li draggable="true">
        <p>JavaScript權威指南</p>
        <p>120￥</p>
      </li>
      <li draggable="true">
        <p>深入淺出Node.js</p>
        <p>36￥</p>
      </li>
    </ul>
  </div>
  <div class="div2">
    <p>
      <span class="box1">數量</span>
      <span class="box2">書名</span>
      <span class="box3">單價</span>
    </p>
  </div>
</body>
</html>

相關文章