我对 jquery 很陌生。目前我正在开发一个购物车网站。其中有三种类型的物品（item1，item2，item3）和三个袋子（bag1，bag2，bag3），一个购物车如 bag1 接受 item1，item2，item3，bag2 接受item2、item3 和 bag3 只接受 item3。到目前为止我已经开发了。
现在我想添加额外的功能，例如用户应该首先选择任何一个包（例如bag1），然后尝试将物品放入包中。此外，如果他们选择一个bag1，则其他两个包丢弃功能应该被禁用（其他包不应接受任何物品，即使该袋子可以接受），如果用户选择其他袋子，也应反转。
PLZ任何人都可以帮助我。我尝试了所有可能的方法。
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Building a drag-drop shopping cart - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body style="height:100%;">
<h2 style="width: 205px">Shopping Cart</h2>
<div class="easyui-panel" fit="true" border="false" style="height:719px; overflow:hidden">
<div class="bag1" style="width: 157px; height: 159px; left: 20px; top: 57px;">
<img src="images/sb1.jpg" height="150" width="150"/>
</div>
<div class="bag2" style="width: 177px; height: 158px; left: 196px; top: 60px;">
<img src="images/sb2.jpg" height="144" width="173"/>
</div>
<div class="bag3" style="width: 203px; height: 150px; left: 400px; top: 62px;">
<img src="images/sb3.jpg" height="137" width="175"/>
</div>
<div class="products1" style="width: 373px; height: 127px; left: 23px; top: 233px;">
<ul>
<li>
<a href="#" class="item1">
<img src="images/shirt2.gif" height="107" width="85"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item1">
<img src="images/shirt3.gif" height="86" width="81"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item1">
<img src="images/shirt4.gif" height="84" width="76"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
</div>
<br>
<div class="products2" style="width: 343px; height: 146px; left: 30px; top: 377px;">
<ul>
<li>
<a href="#" class="item2">
<img src="images/shoes1.gif" height="93" width="108"/>
<div>
<p>puma</p>
<p>Price:$30</p>
</div>
</a>
</li>
<li style="width: 122px; height: 126px">
<a href="#" class="item2">
<img src="images/shoes2.gif" height="84" width="102"/>
<div>
<p>puma</p>
<p>Price:$30</p>
</div>
</a>
</li>
</ul>
</div>
<div class="products3" style="width: 384px; height: 144px; left: 34px; top: 542px;">
<ul>
<li>
<a href="#" class="item3">
<img src="images/shirt2.gif" height="107" width="85"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item3">
<img src="images/shirt3.gif" height="86" width="81"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item3">
<img src="images/shirt4.gif" height="84" width="76"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
</div>
<br><br><br>
<div class="cart1" style="left: -146px; top: 88px; height: 304px; bottom: -88px; width: 237px">
<div class="ctitle">Shopping Cart</div>
<div style="background:#fff">
<table id="cartcontent1" fitColumns="true" style="width1: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>
<th field="remove" width=60 align="right">Remove</th>
</tr>
</thead>
</table>
</div>
<div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
</div>
</div>
<style type="text/css">
.bag1{
position:fixed
}
.bag2{
position:fixed
}
.bag3{
position:fixed
}
.products1{
position:fixed;
height:100%;
background:#fafafa;
}
.products1 ul{
list-style:none;
margin:0;
padding:0px;
}
.products1 li{
display:inline;
float:left;
margin:10px;
}
.products2{
position:fixed;
height:100%;
background:#fafafa;
}
.products2 ul{
list-style:none;
margin:0;
padding:0px;
}
.products2 li{
display:inline;
float:left;
margin:10px;
}
.products3{
position:fixed ;
height:100%;
background:#fafafa;
}
.products3 ul{
list-style:none;
margin:0;
padding:0px;
}
.products3 li{
display:inline;
float:left;
margin:10px;
}
.item1{
display:block;
text-decoration:none;
}
.item1 img{
border:1px solid #333;
}
.item1 p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.item2{
display:block;
text-decoration:none;
}
.item2 img{
border:1px solid #333;
}
.item2 p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.item3{
display:block;
text-decoration:none;
}
.item3 img{
border:1px solid #333;
}
.item3 p{
margin:0;
font-weight:bold;
text-align:center;
color:#c3c3c3;
}
.cart1{
float:right;
position:relative;
width:260px;
height:100%;
background:#ccc;
padding:0px 10px;
}
.ctitle{
text-align:center;
color:#555;
font-size:18px;
padding:10px;
}
.auto-style3 {
float: right;
position: relative;
width: 260px;
height: 100%;
background: #ccc;
padding: 0px 10px;
margin-bottom: 0px;
}
</style>
<script>
$(function(){
$('#cartcontent1').datagrid({
singleSelect:true,
showFooter:true
});
$('.item1').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';
}
});
$('.item2').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';
}
});
$('.item3').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';
}
});
$('.bag1').droppable({
accept: '.item1,.item2,.item3',
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]));
}
});
$('.bag2').droppable({
accept: '.item2,.item3',
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();
}
});
$('.bag3').droppable({
accept: '.item3',
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();
}
});
});
function addProduct(name, price){
var totalQuantity=sumQuantity(data);
if(totalQuantity < 3){
var dg = $('#cartcontent1' );
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
remove: '<a href="#" class="remove" onclick="removeProduct(this, event)">X</a>'
});
}
add();
totalCost += price;
$('#cartcontent1').datagrid('loadData', data);
$('div.cart1 .total').html('Total: $'+totalCost);
}else{
alert('cannot have more than 3 itrems');
}
}
//new function to sum up all the quantity.
function sumQuantity(data){
var sum=0;
for(var i=0; i<data.total; i++){
sum += data.rows[i].quantity;
}
return sum;
}
function removeProduct(el, event) {
var tr = $(el).closest('tr');
var name = tr.find('td[field=name]').text();
var price = tr.find('td[field=price]').text();
var quantity = tr.find('td[field=quantity]').text();
for (var i = 0; i < data.total; i++) {
var row = data.rows[i];
if (row.name == name) {
data.rows.splice(i, 1);
data.total--;
break;
}
}
totalCost -= price * quantity;
$('#cartcontent1').datagrid('loadData', data);
$('div.cart1 .total').html('Total: $' + totalCost);
}
</script>
</body>
</html>