托拽购物车

最新推荐文章于 2024-04-22 15:28:53 发布

piperzero

最新推荐文章于 2024-04-22 15:28:53 发布

阅读量1.3k

点赞数

分类专栏：网站建设文章标签： function class div javascript float html

网站建设专栏收录该内容

740 篇文章 1 订阅

订阅专栏

http://www.corange.cn//uploadfiles/1018-2_90834.jpg

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<SCRIPT
src="Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer.files/jquery.js"
type=text/javascript></SCRIPT>

<SCRIPT
src="Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer.files/interface.js"
type=text/javascript></SCRIPT>

<STYLE type=text/css> {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 12px; PADDING-BOTTOM: 20px; COLOR: #000; PADDING-TOP: 20px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #fff
}
H1 {
FONT-SIZE: 15px; MARGIN: 0px 0px 30px; COLOR: #6caf00
}
#cart {
BORDER-RIGHT: #eee 1px solid; BORDER-TOP: #eee 1px solid; FLOAT: right; BORDER-LEFT: #eee 1px solid; WIDTH: 200px; BORDER-BOTTOM: #eee 1px solid
}
#cart H3 {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; COLOR: #fff; PADDING-TOP: 4px; BACKGROUND-COLOR: #6caf00
}
#cart P {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
.cart {
BACKGROUND-COLOR: #f8f8f8
}
.activeCart {
BACKGROUND-COLOR: #daff9f
}
.hoverCart {
BACKGROUND-COLOR: #ffffcc
}
#products {
WIDTH: 600px; MARGIN-RIGHT: 250px
}
.product {
FLOAT: left; MARGIN-BOTTOM: 20px; WIDTH: 200px; HEIGHT: 200px
}
.product IMG {
CURSOR: move
}
.product H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px
}
.product P {
FONT-SIZE: 11px; COLOR: #333
}
.product A {
COLOR: #6caf00
}
.productCart {
FONT-SIZE: 10px; MARGIN: 10px
}
.productCart A {
FLOAT: right; COLOR: #f00
}
.transferProduct {
BORDER-RIGHT: #6caf00 1px solid; BORDER-TOP: #6caf00 1px solid; BORDER-LEFT: #6caf00 1px solid; BORDER-BOTTOM: #6caf00 1px solid
}
</STYLE>

<META content="MSHTML 6.00.2900.3395" name=GENERATOR></HEAD>
<BODY>
<DIV class=cart id=cart>
<H3>Your cart</H3>
<DIV id=cartProducts></DIV>
<P><STRONG>Total: <SPAN id=cartTotal>0.-</SPAN> $</STRONG></P></DIV>
<H1>Drag products into shopping cart</H1>
<DIV id=products>
<DIV class=product id=product1><IMG alt=""
src="Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer.files/th_17l519col3.jpg">

<H2>Product 1</H2>
<P>Long sleeve shirt</P>
<P><STRONG>Price: <SPAN>49.95</SPAN> $</STRONG></P><A
href="http://bbs.okajax.com/ximen/kj/jqinterface/cart.html#">add to cart</A>
</DIV>
<DIV class=product id=product2><IMG height=128
src="Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer.files/th_30l519col4.jpg"
width=170>
<H2>Product 2</H2>
<P>Long Sleeve, stripes</P>
<P><STRONG>Price: <SPAN>49.95</SPAN> $</STRONG></P><A
href="http://bbs.okajax.com/ximen/kj/jqinterface/cart.html#">add to cart</A>
</DIV>
<DIV class=product id=product3><IMG height=128
src="Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer.files/th_13l569col2.jpg"
width=170>
<H2>Product 3</H2>
<P>Long Sleeve fantasy style</P>
<P><STRONG>Price: <SPAN>49.95</SPAN> $</STRONG></P><A
href="http://bbs.okajax.com/ximen/kj/jqinterface/cart.html#">add to cart</A>
</DIV>
<DIV class=product id=product4><IMG height=128
src="Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer.files/th_13l569col1.jpg"
width=170>
<H2>Product 4</H2>
<P>Long sleeve classic style white fantasy</P>
<P><STRONG>Price: <SPAN>49.95</SPAN> $</STRONG></P><A
href="http://bbs.okajax.com/ximen/kj/jqinterface/cart.html#">add to cart</A>
</DIV>
<DIV class=product id=product5><IMG height=128
src="Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer.files/th_17l519col1.jpg"
width=170>
<H2>Product 5</H2>
<P>Long sleeve, stripes</P>
<P><STRONG>Price: <SPAN>49.95</SPAN> $</STRONG></P><A
href="http://bbs.okajax.com/ximen/kj/jqinterface/cart.html#">add to cart</A>
</DIV>
<DIV class=product id=product6><IMG height=128
src="Shopping cart demo - Draggables, droppable, FX Highlight, Fx Drop, FX Pulsate, FX Shake, FX Transfer.files/th_519plain1112col3.jpg"
width=170>
<H2>Product 6</H2>
<P>Long sleeve</P>
<P><STRONG>Price: <SPAN>49.95</SPAN> $</STRONG></P><A
href="http://bbs.okajax.com/ximen/kj/jqinterface/cart.html#">add to cart</A>
</DIV></DIV>
<SCRIPT type=text/javascript>
$(document).ready(
function()
{
$('#products a')
.bind(
'click',
function() {
$(this.parentNode)
.TransferTo(
{
to:addProductToCart(this.parentNode),
className:'transferProduct',
duration: 400
}
);
return false;
}
);
$('div.product').Draggable({revert: true, fx: 300, ghosting: true, opacity: 0.4});
$('#cart').Droppable(
{
accept : 'product',
activeclass: 'activeCart',
hoverclass: 'hoverCart',
tolerance: 'intersect',
onActivate: function(dragged)
{
if (!this.shakedFirstTime) {
$(this).Shake(3);
this.shakedFirstTime = true;
}
},
onDrop: addProductToCart
}
);
}
);
var addProductToCart = function(dragged)
{
var cartItem;
var productName = $('h2', dragged).html();
var productPrice = parseFloat($('span', dragged).html());
var productId = $(dragged).attr('id');
var isInCart = $('#' + productId + '_cart');
if (isInCart.size() == 1) {
var quantity = parseInt(isInCart.find('span.quantity').html()) + 1;
isInCart.find('span.quantity').html(quantity+'').end().Pulsate(300, 2);
cartItem = isInCart.get(0);
} else {
$('#cartProducts')
.append('<div class="productCart" id="' + productId + '_cart">' + productName + '<a href="#">remove</a><br />qty: <span class="quantity">1</span><br />price: <span class="price">' + productPrice + ' $</span></div>')
.find('div.productCart:last')
.fadeIn(400)
.find('a')
.bind(
'click',
function(){
$(this.parentNode).DropOutDown(
400,
function() {
$(this).remove();
calculateCartTotal();
}
);
return false;
}
);
cartItem = $('div.productCart:last').get(0);
}
calculateCartTotal();
return cartItem;
};
var calculateCartTotal = function()
{
var total = 0;
$('#cartProducts .productCart').each(
function()
{
var price = parseFloat($('span.price', this).html());
var quantity = parseInt($('span.quantity', this).html());
total += price * quantity;
}
);
$('#cartTotal').html(formatNr(total));
$('#cart p').Highlight(500, '#ff0', function(){$(this).css('backgroundColor', 'transparent');});
};
var formatNr = function(nr)
{
thousands = parseInt(nr/1000);
hundreds = parseInt(nr - thousands*1000);
decimals = parseInt((nr - parseInt(nr)) * 100);
return (thousands > 0 ? thousands + ' ' : '') + (nr > 1000 & hundreds < 100 ? '0' : '') + (nr > 1000 & hundreds < 10 ? '0' : '') + hundreds + '.' + (decimals > 0 ? decimals : '-');
}
</SCRIPT>

<SCRIPT language=JavaScript type=text/javascript>var client_id = 1;</SCRIPT>

<SCRIPT language=JavaScript src="" type=text/javascript></SCRIPT>
<NOSCRIPT>
<P><IMG height=1 alt="" src="" width=1></P></NOSCRIPT></BODY></HTML>
JS文件两个，见压缩包

http://www.corange.cn//uploadfiles/js_68922.zip

piperzero

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
托拽购物车

 Shopping cart demo - Draggab
复制链接

扫一扫