Heim > Artikel > Web-Frontend > Einfache Drag-and-Drop-Warenkorbfunktion in JS implementiert

Einfache Drag-and-Drop-Warenkorbfunktion in JS implementiert

小云云Original: 2018-01-05 09:40:562173Durchsuche

In diesem Artikel wird hauptsächlich die in JS implementierte einfache Drag-and-Drop-Warenkorbfunktion vorgestellt, einschließlich Implementierungstechniken im Zusammenhang mit der Reaktion auf Javascript-Ereignisse und dem dynamischen Betrieb von Seitenelementen. Außerdem wird ein vollständiger Beispielquellcode zum Herunterladen bereitgestellt Verweisen Sie darauf. Freunde, die es benötigen, können darauf verweisen.

Das Beispiel in diesem Artikel beschreibt die einfache Drag-and-Drop-Warenkorbfunktion, die in JS implementiert ist. Teilen Sie es allen als Referenz mit. Die Einzelheiten lauten wie folgt:

<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>

Betriebseffekt:

Verwandte Empfehlungen:

TP5 integriert einen Webuploader, um Vorschau, Ziehen, Suchen und Löschen zu ermöglichen

Beispiel für Erläutern Sie jQuery mithilfe des zTree-Plug-Ins, um die Drag-Funktion zu realisieren

So implementieren Sie das Hochladen per Drag-and-Drop von Dateien

Das obige ist der detaillierte Inhalt vonEinfache Drag-and-Drop-Warenkorbfunktion in JS implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery JS 事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Unterschiede zwischen verschiedenen js-Sortiermethoden und SortiermethodenNächster Artikel：Detaillierte Erläuterung der Unterschiede zwischen verschiedenen js-Sortiermethoden und Sortiermethoden

In Verbindung stehende Artikel

Mehr sehen