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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
关于js datetime的那点事
Nov 15 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 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
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
javascript奇异的arguments分析
2010/10/20 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
2016/05/03 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
2016/09/26 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
js轮播图之旋转木马效果
2020/10/13 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python的互斥锁与信号量详解
2019/09/12 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python map比for循环快在哪
2020/09/21 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
恶意软件的定义
2014/11/12 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
副总经理工作职责
2013/11/28 职场文书
公司贷款承诺书
2014/05/30 职场文书
小学教师自我评价
2015/03/04 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书