JS实现的简单拖拽购物车功能示例【附源码下载】
本文实例讲述了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程序设计有所帮助。
相关推荐
-
基于JavaScript实现添加到购物车效果附源码下载
我们有很多种方法实现将商品添加到购物车,通常的做法是点击"添加到购物车"按钮,会跳转到购物车,在购物车里可以点击"结算"按钮进行结算.而今天我给大家介绍一个更友好的解决方案. 查看演示 下载源码 默认情况下,购物车是隐藏不可见的,当用户点击添加到购物车按钮后,商品信息会添加到购物车,购物车会以按钮的形式出现在页面右下角,点击按钮则会展开购物车,显示购物车中的商品信息,同时也可以对购物车中的商品进行删除或者结算等操作.用户也可以暂时关闭购物车继续购物. HTML结构
-
使用Angular.js实现简单的购物车功能
先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script
-
JavaScript面向对象编写购物车功能
之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着写写. 接下来我会一步一步分析,面向对象的写法过程.整个流程大致分为: 1.先定义好一个商品列表的数据形式和商品总数集,类似: var data = [{name: 'name', unitPrice: 10, num: 2}]; var total = {type:
-
js购物车实现思路及代码(个人感觉不错)
复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServer
-
原生js模拟淘宝购物车项目实战
本文实例讲述了原生js模拟淘宝购物车实现代码.分享给大家供大家参考.具体如下: 通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>JavaScript实现购物车项
-
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
本文实例讲述了JS+HTML5实现的前端购物车功能插件.分享给大家供大家参考,具体如下: 最近做一个商城,需要用到一个简答的购物车功能,当然,后端实现比较容易,,这里重点还是讲一下前端的JS插件. 从源代码里面没看出来,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下载就好,我做了一些简单的修复,支持了中文 这个插件使用了HTML5的新特效:storage ,就是游览器数据库的功能,这跟之前把数据存在cookies里面原理是相识的,这样的好处在于用户刷新页面,数据还在,,又不需要跟后端
-
JS高仿抛物线加入购物车特效实现代码
1. 简介 要想让你的购物车有种高大上的感觉,加入特效的功能是必不可少的. 2. 实现思路 设置一些简单的样式 模拟把它添加到购物车中,数量增加 从点击的位置开始动画,结束动画 3. 代码实现 CSS代码 咱们给它设置一些简单的样式,让它显得不是那么的太low .flyer { display: block; width: 50px; height: 50px; border-radius: 50px; position: fixed; margin-left: 50px; z-index: 9
-
js实现简单的购物车有图有代码
如图: 全选按钮的实现为: 复制代码 代码如下: <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input t
-
Javascript操纵Cookie实现购物车程序
复制代码 代码如下: /***************************************************************************************************** Name 购物车 Version 1.1 Author Vanni(凡林) url:www.27sea.com QQ:303590170 CreateDate 2005-05-31 Description 此类是基于JavaScript和客户端Cookie,请保证客户端开
-
js绘制购物车抛物线动画
天猫将商品加入购物车会有一个抛物线动画,告诉用户操作成功以及购物车的位置,业务中需要用到类似的效果,记录一下实现过程备忘,先上demo 一开始没有想到用抛物线函数去做,也已经忘记还有这么个函数了,想着抛物线本质上就是向右和向上方向各有一个速度(就上面的demo而言),向右的速度匀速,向上的速度递减,减到0后再反方向递增,元素的left和top值随时间递增而改变,元素运动轨迹就是抛物线,这个思路不具备通用性,实现也比较复杂,放弃了. 之后参考了张鑫旭用抛物线函数的实现方式和愚人码头的改进,豁然开朗
-
js实现仿购物车加减效果
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ overflow-y: auto; } ul{ margin-top: 20px; border-top: 1px solid #666; } h1{ widt
-
JavaScript编写一个简易购物车功能
网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现. 1.用html实现内容: 2.用css修饰外观: 3.用js(jq)设计动效. 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中涉及到的商品都是网上随便copy的,不具有参考价值): <div id="goods"> <div c