我是 jquery 的新手。目前我正在开发一个网站，其中必须将很少的图像拖到一个购物车中，而在其他购物车中则很少。
例如，T 恤必须放在第一个购物车中，鞋子必须放在第二个购物车中 但不应该发生相反的情况(T 恤不应掉入第二个购物车，鞋子不应掉入第一个购物车)。
我开发了一部分代码，其中所有东西都放入两个购物车 但只有一个购物车显示名称和价格。
我希望两个购物车都显示名称和价格，但第一个购物车应该只接受衬衫，另一个只接受鞋子并显示名称和价格。
请尝试解决我的问题。
这是我的代码
<!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>
最佳答案
您定义了 function addProduct(name,price){ 两次，这是不正确的，您可以将第三项作为 id 传递。为了在 droppable 中接受特定的 draggable 类，请使用 droppable 的接受参数，例如 accept: '.item'
更新后的代码如下:
<!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({
accept: '.item',
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]), '#cartcontent');
}
});
$('.cart1').droppable({
accept: '.itemm',
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]), '#cartcontent0');
}
});
});
function addProduct(name, price, dgId){
var dg = $(dgId);
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>
关于html - 使用 jquery 拖放图像并将图像还原到特定区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17387767/