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 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
小程序实现多列选择器
Feb 15 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
php商品对比功能代码分享
2015/09/24 PHP
php实现学生管理系统
2020/03/21 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
php和html的区别点详细总结
2019/09/24 PHP
简明json介绍
2008/09/28 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
js如何准确获取当前页面url网址信息
2020/09/13 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
Python中zip()函数用法实例教程
2014/07/31 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
弘扬民族精神演讲稿
2014/05/07 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
sql server 累计求和实现代码
2022/02/28 SQL Server
Linux中文件的基本属性介绍
2022/06/01 Servers
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers
Flink 侧流输出源码示例解析
2022/09/23 Servers