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

 更新时间:2018年01月03日 10:51:19   作者:强强强子  
这篇文章主要介绍了JS实现的简单拖拽购物车功能,涉及javascript事件响应及页面元素动态操作相关实现技巧,并附带完整实例源码供读者下载参考,需要的朋友可以参考下

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

运行效果:

附:完整实例代码点击此处本站下载

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JS中多种方式创建对象详解

    JS中多种方式创建对象详解

    下面小编就为大家带来一篇JS中多种方式创建对象详解。小编觉得挺不错的。现在分享给大家,给大家一个参考。一起跟随小编过来看看吧
    2016-03-03
  • 浅析XMLHttpRequest的缓存问题

    浅析XMLHttpRequest的缓存问题

    这篇文章主要是对XMLHttpRequest的缓存问题进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 使用伪命名空间封装保护独自创建的对象方法

    使用伪命名空间封装保护独自创建的对象方法

    下面小编就为大家带来一篇使用伪命名空间封装保护独自创建的对象方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript游戏之优化篇

    JavaScript游戏之优化篇

    最近回头看看自己以前写的游戏代码,总结出几个可以优化改进的地方,当然还有很多地方需要优化,还希望大家指出来。
    2010-11-11
  • 简单了解JavaScript中的执行上下文和堆栈

    简单了解JavaScript中的执行上下文和堆栈

    这篇文章主要介绍了简单了解JavaScript中的执行上下文和堆栈,你应该对解释器了解得更清楚:为什么在声明它们之前可以使用某些函数或变量?以及它们的值是如何确定的?,需要的朋友可以参考下
    2019-06-06
  • 用iframe实现不刷新整个页面上传图片的实例

    用iframe实现不刷新整个页面上传图片的实例

    下面小编就为大家带来一篇用iframe实现不刷新整个页面上传图片的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS获取并操作iframe中元素的方法

    JS获取并操作iframe中元素的方法

    JS获取并操作iframe中元素的方法,需要的朋友可以参考一下
    2013-03-03
  • js canvas实现红包照片效果

    js canvas实现红包照片效果

    这篇文章主要介绍了js canvas实现红包照片效果
    2018-08-08
  • JS+CSS实现简单滑动门(滑动菜单)效果

    JS+CSS实现简单滑动门(滑动菜单)效果

    这篇文章主要介绍了JS+CSS实现简单滑动门(滑动菜单)效果,通过JavaScript响应鼠标事件动态设置页面元素样式实现滑动菜单功能,需要的朋友可以参考下
    2015-09-09
  • jQuery ajax(复习)—Baidu ajax request分离版

    jQuery ajax(复习)—Baidu ajax request分离版

    你没有看错标题,本文的确是在讲Baidu ajax,不过是很久很久以前的版本了,我们先分析一段简单的ajax代码,来自早期的百度七巧板项目通过这个来先复习一遍ajax的知识
    2013-01-01

最新评论