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


Posted in Javascript onJanuary 03, 2018

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

运行效果:

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

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

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

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

Javascript 相关文章推荐
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
WebPack基础知识详解
Jan 16 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 #Javascript
vue项目中用cdn优化的方法
Jan 03 #Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 #Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 #Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 #Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 #Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 #Javascript
You might like
十天学会php之第一天
2006/10/09 PHP
php session 检测和注销
2009/03/16 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
JavaScript延迟加载
2021/03/09 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python 序列的方法总结
2016/10/18 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
品牌宣传方案
2014/03/21 职场文书
募捐倡议书
2014/04/14 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
2014年基建工作总结
2014/12/12 职场文书
停电放假通知
2015/04/14 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
博物馆观后感
2015/06/05 职场文书
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
Spring 使用注解开发
2022/05/20 Java/Android