Home > Article > Web Front-end > Simple drag-and-drop shopping cart function implemented in JS

Simple drag-and-drop shopping cart function implemented in JS

小云云Original: 2018-01-05 09:40:562171browse

This article mainly introduces the simple drag-and-drop shopping cart function implemented in JS, involving implementation techniques related to javascript event response and dynamic operation of page elements. It also comes with a complete example source code for readers to download and refer to. Friends who need it can refer to it. I hope it can help. to everyone.

The example in this article describes the simple drag-and-drop shopping cart function implemented in JS. Share it with everyone for your reference, the details are as follows:

<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=&#39;liC&#39;>";
  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>

Running effect:

Related recommendations:

TP5 integrates webuploader to realize preview drag-and-drop search and delete

Example to explain jQuery using zTree plug-in to implement drag-and-drop function

How to implement file drag and drop upload

The above is the detailed content of Simple drag-and-drop shopping cart function implemented in JS. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery JS 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the differences between various js sorting methods and sort methodsNext article：Detailed explanation of the differences between various js sorting methods and sort methods

See more

Simple drag-and-drop shopping cart function implemented in JS

Related articles