私はjqueryを初めて使用しています.現在、1つのショッピングカートにドラッグする必要のある画像と他のショッピングカートにドラッグする必要があるWebサイトを開発しています。
たとえば、T シャツを最初のショッピング カートに、靴を 2 番目のショッピング カートに入れる必要がありますが、その逆は行わないでください (T シャツを 2 番目のショッピング カートに入れ、靴を最初のショッピング カートに入れることはできません)。
すべてが 2 つのショッピング カートにドロップされるコードの一部を開発しましたが、名前と価格が表示されるのは 1 つのショッピング カートだけです。
両方のショッピング カートに名前と価格を表示したいのですが、最初のショッピング カートはシャツのみを受け入れ、もう 1 つのショッピング カートは靴のみを受け入れ、名前と価格を表示する必要があります。
私の問題を解決してみてください。
ここに私のコードがあります
<!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:100%;overflow:hidden">
<br><br><br><br>
<div class="cart1" style="left: 5px; top: 0px; height: 309px; bottom: 0px; width: 255px">
<div class="ctitle">Shopping Cart</div>
<div style="background:#fff">
<table id="cartcontent0" 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>
</tr>
</thead>
</table>
</div>
<div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
</div>
<br><br><br>
<div class="cart" style="left: -9px; top: -62px; height: 309px; bottom: 62px; width: 269px">
<div class="ctitle">Shopping Cart</div>
<div style="background:#fff">
<table id="cartcontent" 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>
</tr>
</thead>
</table>
</div>
<div class="ctitle" style="position:absolute;bottom:10px">Drop here to add to cart</div>
</div>
<div class="products" style="width: 203px; height: 277px;">
<ul>
<li>
<a href="#" class="item">
<img src="images/shirt2.gif" height="107" width="85"/>
<div>
<p>Feeling</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt3.gif" height="86" width="81"/>
<div>
<p>Elephant</p>
<p>Price:$25</p>
</div>
</a>
</li>
<li>
<a href="#" class="item">
<img src="images/shirt4.gif" height="84" width="76"/>
<div>
<p>Stamps</p>
<p>Price:$25</p>
</div>
</a>
</li>
</ul>
</div>
<div class="productss" style="width: 203px; height: 277px;">
<ul>
<li>
<a href="#" class="itemm">
<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="itemm">
<img src="images/shoes2.gif" height="84" width="102"/>
<div>
<p>puma</p>
<p>Price:$30</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<style type="text/css">
.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;
}
</style>
<script>
$(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}]);
}
</script>
</body>
</html>