私はjqueryが初めてです。現在、私はショッピングカートのウェブサイトを開発しています.3種類のアイテム（item1、item2、item3）と3つのバッグ（bag1、bag2、bag3）があり、bag1のような1つのショッピングカートにはitem1、item2、item3、bag2が受け入れられますitem2、item3、bag3 は item3 のみを受け入れます。これまでに開発したもの。
ここで、ユーザーが最初にバッグのいずれか (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>