使用jquery拖放图像并将图像还原到特定区域 [英] Drag and drop images and reverting images to a specific area using jquery
本文介绍了使用jquery拖放图像并将图像还原到特定区域的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是jquery的新手。目前我正在开发一个网站，其中很少有图片必须拖到一个购物车中而在其他购物车中很少。
I am new to jquery.Presently i am developing a website where few images must be dragged into one shopping cart and few in other.
例如T恤必须是第二个购物车中的第一个购物车和鞋子掉落了
，但反过来不应该发生（T恤不应该放在第二个购物车中，鞋子不应该放在第一个购物车中）。
For example tshirts must be dropped in first shopping cart and shoes in the second shopping cart but the reverse should not happen(tshirts should not drop in the second shopping cart and shoes should not drop in the first shopping cart).
我开发了一部分代码，其中所有内容都放入两个购物车
但只有一个购物车显示名称和价格。
I developed a part of code where everything is dropping into two shopping carts but only one shopping cart is displaying the name and price.
我希望购物车显示名称和价格，但第一个购物车应该只接受衬衫和其他鞋子，并显示名称和价格。
I want both the shopping cart display the name and price but the first shopping cart should accept only shirts and the other only shoes and display the name and price.
PLZ尝试解决我的问题。
plz try to solve my problem.
这是我的代码
<!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>
推荐答案
您正在定义函数addProduct （名称，价格）{两次不正确，你可以传递第三项作为id。并且要接受 droppable 中的特定可拖动类，请使用 droppable 喜欢接受：'.item'
You are defining function addProduct(name,price){ two times which is not correct, you can pass third item as id. And for accepting particular draggable class in droppable use accept argument of droppable like 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>
这篇关于使用jquery拖放图像并将图像还原到特定区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
