彩票走势图

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库！查看详情>>>

<jQuery EasyUI最新版下载>

如果你能利用你的web应用程序很容易地实现简单的拖放，那么你一定知道一些特别的东西，使用jQuery EasyUI，我们能在web应用程序中简单地实现拖放功能。

在本教程中，我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面。购物车中的物品和价格将会更新。

在页面上显示商品：

<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>

正如你在上面代码中看到的一样，我们添加了一个ul元素，其中包含了一些li元素来显示商品。每个商品的名字和价格属性都包含在p元素中。

创建购物车：

<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';
}
});

请注意，我们将可拖动属性'proxy'设置为'clone'，因此拖动元素将有复制的效果。

在购物车中放置选中的商品：

$('.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++){
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);
} 

当放置好该商品之后，我们首先得到商品的名称和价格，然后调用'addProduct'函数来更新购物车。

下载该EasyUI示例：

购买最新正版授权！""