Draggable problem
HI,
i am new to this forum i hope i get some quick response from it.
what we are trying to do is to make a grid in which we have some boxes
and we are dropping picture in it. it works fine but when we drop same
image in 3 boxes it. when try to pick the image and try to palce it to
it original location it picks all 3 images. any idea why i am putting
the code here please have a look on to it.
regards
wasiq aftab ch
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script src="jquery/jquery.js"></script>
<script src="jquery/ui.core.js"></script>
<script src="jquery/ui.draggable.js"></script>
<script src="jquery/ui.droppable.js"></script>
<script src="jquery/ui.sortable.js"></script>
<style type="text/css">
body{
font:normal 12px Verdana;
margin:0;
padding:0;
}
.wrap{
width:800px;
position:relative;
padding:10px;
}
.sourcearea{
width:150px;
float:left;
}
.items {
z-index: 100;
}
.droparea {
float:right;
background-color: #EFEFE0;
border: 1px solid #EFEFE0;
width: 100px;
min-height: 100px;
margin-left:2px;
}
.droparea img{
margin:5px;
}
.dropareahover {
background-color:#EFD2A4;
border-color:#DFA853;
}
.summary{
padding:10px;
}
.summary span{
font-weight:bold;
}
</style>
<!--[if IE 6]>
<style type="text/css">
.droparea { height: expression(this.scrollHeight < 200 ? "200px" :
"auto" ); } /* Min-height Fix*/
</style>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="summary">
Dragged Items = <span id="itemTotal">0</span>;
(Dogs = <span id="itemDog">0</span>; Sheep = <span
id="itemSheep">0</span>;)
Drag the dog and sheep to the drop zone area at the right.</
p>
</div>
<div class="wrap">
<div class="sourcearea">
<span id="itemsheep" class="items"><img src="sheep.jpg"
width="100" class="temp"></span>
<span id="itemdog" class="items"><img src="dog.jpg"
width="100" class="temp"></span>
<span id="Span1" class="items"><img src="sheep.jpg"
width="100" class="temp"></span>
<span id="Span2" class="items"><img src="dog.jpg"
width="100" class="temp"></span>
</div>
<div id="dr1" class="droparea"> </div>
<div id="dr2" class="droparea"> </div>
<div id="dr3" class="droparea"> </div>
<div id="dr4" class="droparea"> </div>
<div id="dr5" class="droparea"> </div>
<div id="dr6" class="droparea"> </div>
</div>
<script>
var itemDogCtr = 0; itemSheepCtr = 0; itemTotalCtr = 0;
$(document).ready(function(){
var drop=false;
$(".items").draggable({helper: 'clone'});
$(".items").droppable({revert: 'valid' });
$(".droparea").droppable({
accept: ".items",
hoverClass: 'dropareahover',
tolerance: 'pointer',
drop: function(ev, ui) {
debugger;
if(itemTotalCtr >= 36) { alert("Area is full"); return;}
var dropElemId = ui.draggable.attr("id");
var dropElem = ui.draggable.html
();
// $(ui.draggable).draggable();
debugger;
if ($(this).find(".temp").length > 0)
{
return;
}
else
{
debugger;
$(this).append(dropElem);
//$(".temp").draggable();
$(this).find(".temp").draggable({helper: 'clone'});
if (drop!=true)
{
drop=true;
$(".sourcearea").droppable({
accept: ".temp",
hoverClass: 'dropareahover',
tolerance: 'pointer',
drop: function(ev, ui) {
debugger;
var ParentID1= $(ui.draggable)[0].parentNode;
$(ParentID1).find(".temp").remove(".temp");
}
});
}
if(dropElemId == 'itemdog') itemDogCtr++;
if(dropElemId == 'itemsheep') itemSheepCtr++;
itemTotalCtr = itemDogCtr + itemSheepCtr;
$("#itemTotal").html(itemTotalCtr.toString());
$("#itemDog").html(itemDogCtr.toString());
$("#itemSheep").html(itemSheepCtr.toString());
}
}
});
});
</script>
</div>
</form>
</body>
</html>
Topic Participants
wasiq.aftab.ch
Richard Worth