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 相关文章推荐
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
如何利用node转发请求详解
Sep 17 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
基于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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
ThinkPHP 3.2.3实现加减乘除图片验证码
2018/12/05 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
img的onload的另类用法
2008/01/10 Javascript
优化javascript的执行速度
2010/01/23 Javascript
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
python游戏地图最短路径求解
2019/01/16 Python
浅析python redis的连接及相关操作
2019/11/07 Python
如何基于python测量代码运行时间
2019/12/25 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
证婚人经典证婚词
2014/01/09 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
环保建议书作文
2014/03/12 职场文书
签约仪式策划方案
2014/06/02 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL