@author YHC
如果你能够简单的实现拖动和放置在你的web应用中,然后你知道你有一些特别的东西,使用 jQuery EasyUI我们在我们的应用中可以简单的实现拖动和放置.
在这个教程中我们将向你展示如何创建一个购物车页面启用用户拖动和放置用户想买的商品,购物栏和价格将更新.
显示 商品在页面:
- <ul class="products">
- <li>
- <a href="#" class="item">
- <img src="images/shirt1.gif"/>
- <div>
- <p>Balloon</p>
- <p>Price:$25</p>
- </div>
- </a>
- </li>
- <li>
- <a href="#" class="item">
- <img src="images/shirt2.gif"/>
- <div>
- <p>Feeling</p>
- <p>Price:$25</p>
- </div>
- </a>
- </li>
- <!-- other products -->
- </ul>
创建一个购物车:
- <div class="cart">
- <h1>Shopping Cart</h1>
- <table id="cartcontent" style="width:300px;height:auto;">
- <thead>
- <tr>
- <th field="name" width=140>Name</th>
- <th field="quantity" width=60 align="right">Quantity</th>
- <th field="price" width=60 align="right">Price</th>
- </tr>
- </thead>
- </table>
- <p class="total">Total: $0</p>
- <h2>Drop here to add to cart</h2>
- </div>
拖动克隆的商品:
- $('.item').draggable({
- revert:true,
- proxy:'clone',
- onStartDrag:function(){
- $(this).draggable('options').cursor = 'not-allowed';
- $(this).draggable('proxy').css('z-index',10);
- },
- onStopDrag:function(){
- $(this).draggable('options').cursor='move';
- }
- });
放置选择商品到购物车中
- $('.cart').droppable({
- onDragEnter:function(e,source){
- $(source).draggable('options').cursor='auto';
- },
- onDragLeave:function(e,source){
- $(source).draggable('options').cursor='not-allowed';
- },
- onDrop:function(e,source){
- var name = $(source).find('p:eq(0)').html();
- var price = $(source).find('p:eq(1)').html();
- addProduct(name, parseFloat(price.split('$')[1]));
- }
- });
- var data = {"total":0,"rows":[]};
- var totalCost = 0;
- function addProduct(name,price){
- function add(){
- for(var i=0; i<data.total; i++){
- var row = data.rows[i];
- if (row.name == name){
- row.quantity += 1;
- return;
- }
- }
- data.total += 1;
- data.rows.push({
- name:name,
- quantity:1,
- price:price
- });
- }
- add();
- totalCost += price;
- $('#cartcontent').datagrid('loadData', data);
- $('div.cart .total').html('Total: $'+totalCost);
- }
http://www.9748.com欢迎访问.