在本文中，我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面，购物篮中的物品和价格将更新，分享给大家，具体内容如下：
效果图：
具体代码如下
显示页面上的商品：
rush:xhtml;">
Feeling
Price:$25
元素中。
Drop here to add to cart我们使用数据网格（datagrid）来显示购物篮中的物品。 拖动克隆的商品：rush:js;">
$('.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';
}
});
请注意，我们把 draggable 属性的值从 'proxy' 设置为 'clone'，所以拖动元素将由克隆产生。 放置选择商品到购物车中rush:js;">
$('.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
每当放置商品的时候，我们首先得到商品名称和价格，然后调用 'addProduct' 函数来更新购物篮。 EasyUI实现拖放商品放置购物车的功能就介绍到这，有了本文为大家提供的实例，相信大家应该很轻松的就可以实现拖放商品放置购物车的模块设计，谢谢大家的阅读。 相关文章jQuery实时显示日期、时间 html: <span id="...
jQuery 添加水印 <script src="../../../.....
中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下： Response.Write(&q...
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...
|
|---|
