使用jquery拖放图像并将图像还原到特定区域
我是jquery的新手。目前我正在开发一个网站，其中很少有图片必须被拖入一个购物车而其他几个。
例如，T恤必须放在第一个购物车和第二个购物车中的鞋子中，但反过来不应该发生（T恤不应该放在第二个购物车中，鞋子不应该放在第一个购物车中）。
我开发了一部分代码，其中所有内容都放入两个购物车中，但只有一个购物车显示名称和价格。
我希望购物车显示名称和价格，但第一个购物车应该只接受衬衫和其他鞋子，并显示名称和价格。
PLZ试着解决我的问题。
这是我的代码
Building a drag-drop shopping cart - jQuery EasyUI Demo Shopping Cart
.products{ overflow:auto; height:100%; background:#fafafa; } .products ul{ list-style:none; margin:0; padding:0px; } .products li{ display:inline; float:left; margin:10px; } .productss{ overflow:auto; height:100%; background:#fafafa; } .productss ul{ list-style:none; margin:0; padding:0px; } .productss li{ display:inline; float:left; margin:10px; } .item{ display:block; text-decoration:none; } .item img{ border:1px solid #333; } .item p{ margin:0; font-weight:bold; text-align:center; color:#c3c3c3; } .itemm{ display:block; text-decoration:none; } .itemm img{ border:1px solid #333; } .itemm p{ margin:0; font-weight:bold; text-align:center; color:#c3c3c3; } .cart{ float:right; position:relative; width:260px; height:100%; background:#ccc; padding:0px 10px; } .ctitle{ text-align:center; color:#555; font-size:18px; padding:10px; } .cart1 { float: right; position: relative; width: 260px; height: 100%; background: #ccc; padding: 0px 10px; } .auto-style1 { margin-left: 10; } $(function(){ $('#cartcontent').datagrid({ singleSelect:true, showFooter:true }); $('#cartcontent0').datagrid({ singleSelect:true, showFooter:true }); $('.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'; } }); $('.itemm').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])); } }); $('.cart1').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])); } }); }); function addProduct(name,price){ var dg = $('#cartcontent'); var data = dg.datagrid('getData'); 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(); dg.datagrid('loadData', data); var cost = 0; var rows = dg.datagrid('getRows'); for(var i=0; i<rows.length; i++){ cost += rows[i].price*rows[i].quantity; } dg.datagrid('reloadFooter', [{name:'Total',price:cost}]); } function addProduct(name,price){ var dg = $('#cartcontent0'); var data = dg.datagrid('getData'); 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(); dg.datagrid('loadData', data); var cost = 0; var rows = dg.datagrid('getRows'); for(var i=0; i<rows.length; i++){ cost += rows[i].price*rows[i].quantity; } dg.datagrid('reloadFooter', [{name:'Total',price:cost}]); } 
您正在定义function addProduct(name,price){两次不正确，您可以将第三项作为id传递。 并且为了接受draggable中特定的draggable类， droppable接受droppable accept参数，如accept: '.item'
更新后的代码如下：
Building a drag-drop shopping cart - jQuery EasyUI Demo Shopping Cart