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程序设计有所帮助。
相关文章
jQuery ajax(复习)—Baidu ajax request分离版
你没有看错标题，本文的确是在讲Baidu ajax，不过是很久很久以前的版本了,我们先分析一段简单的ajax代码，来自早期的百度七巧板项目通过这个来先复习一遍ajax的知识2013-01-01
Javascript实现通过选择周数显示开始日和结束日的实现代码
这篇文章主要介绍了Javascript实现通过选择周数显示开始日和结束日的实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-05-05
从这一节开始，我们将从零开始打造我们的chrome插件工具库，第一节我们将讲一下插件开发的基础知识并构建一个简单但却很实用的插件，在构建之前，我们先简单的了解一下插件以及插件开发的基础知识2020-10-10
这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（ JavaScript ）中，可以作为一篇指南,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了一些关于类型和对象的例子，大家看完例子后可能更容易理解类型和对象之间的联系2013-11-11
这篇文章主要介绍了BootStrap实现树形目录组件代码详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
JavaScript事件循环是一种机制，用于处理异步事件和回调函数。它是JavaScript运行时环境的一部分，负责管理事件队列和调用栈。文章中有详细的代码示例，需要的朋友可以参考一下2023-04-04
这篇文章主要为大家详细介绍了Bootstrap表格使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
本文主要介绍了TypeScript 判断两个数组的内容是否相等，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-11-11
这篇文章主要介绍了Javascript变量的作用域和作用域链详解,本文用一个实例和运行结果来讲解这两个知识,需要的朋友可以参考下2015-04-04
最新评论