AJAX/PHP/JQuery/CSS设计拖拉式购物车
本人作品,原文发表在
http://tech.it168.com/a2011/0411/1176/000001176645_all.shtml

在电子商务网站的建设中，购物车这个功能是不能缺少的。而编写购物车的方法也是多种多样，有的简单有的复杂，而在本文中，将带领大家使用PHP,JQuery和CSS和AJAX技术，去设计一个拖拉式的购物车，这个购物车的效果比较酷，当你选择好要购买的商品后，直接用鼠标拖拉到一个购物篮的图标中去，则完成一次购物的过程，跟在超市购物的过程有点相像。本文将使用MySQL数据库，并且用到了jQuery中的一个很好用的插件simpletip(地址：http://craigsworks.com/projects/simpletip/)，接下来会介绍其详细的用法。
步骤1、建立Mysql数据库

　　首先，为我们的购物车应用建立如下的mysql数据库文件，下面给出表结构，并添加一些样例数据：

CREATE TABLE IF NOT EXISTS `internet_shop` (
  `id` int(6) NOT NULL auto_increment,
  `img` varchar(32) collate utf8_unicode_ci NOT NULL default '',
  `name` varchar(64) collate utf8_unicode_ci NOT NULL default '',
  `description` text collate utf8_unicode_ci NOT NULL,
  `price` double NOT NULL default '0',
  PRIMARY KEY  (`id`),
  UNIQUE KEY `img` (`img`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

INSERT INTO `internet_shop` VALUES(1, 'iPod.png', 'iPod', 'The original and popular iPod.', 200);
INSERT INTO `internet_shop` VALUES(2, 'iMac.png', 'iMac', 'The iMac computer.', 1200);
INSERT INTO `internet_shop` VALUES(3, 'iPhone.png', 'iPhone', 'This is the new iPhone.', 400);
INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png', 'iPod Shuffle', 'The new iPod shuffle.', 49);
INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png', 'iPod Nano', 'The new iPod Nano.', 99);
INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png', 'Apple TV', 'The new Apple TV. Buy it now!', 300);
　　这里我们只是简单地设计了商品的属性表，其中包括了商品的图片，名称，价格和描述，在实际的应用中，可能会设计更复杂的商品属性。



　　步骤2、设计页面结构

　　接下来，我们开始设计我们的页面结构，HTML代码如下：

<div id="main-container"> <!—主DIV -->

<div class="tutorialzine">    <!—标题 -->
<h1>Shopping cart</h1>
<h3>The best products at the best prices</h3>
</div>

<div class="container">    <!—显示商品区域-->

<span class="top-label">
<span class="label-txt">Products</span>    <!—显示Products的标题div -->
</span>

<div class="content-area">
<div class="content drag-desired">   
<?php
// 这里动态从数据库中读取商品
?>

<div class="clear"></div>    <!—这里用于当用户鼠标移动到该产品时，显示该产品的简介->
</div>
</div>

<div class="bottom-container-border">    <!—区域底部的圆角区域-->
</div>

</div>   
<div class="container">    <!—购物车的div层>

<span class="top-label">
<span class="label-txt">Shopping Cart</span>   
</span>

<div class="content-area">
<div class="content drop-here">    <!—该区域为可接收用户拖拉物品到购物车的区域 -->
<div id="cart-icon">
<img src="img/Shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />   
<!--一个加载等待的图标-->
<img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
</div>
<!—购物表单?
<form name="checkoutForm" method="post" action="order.php">   
<div id="item-list">    <!—购物清单列表 -->

</div>
</form>   

<div class="clear"></div>   
<div id="total"></div>    <!—商品总价 -->
<div class="clear"></div>    <!-- clearing the floats -->

<!--结帐的按钮?
<a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="butto