Draggable problem

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">&nbsp;</div>
        <div id="dr2" class="droparea">&nbsp;</div>
        <div id="dr3" class="droparea">&nbsp;</div>
        <div id="dr4" class="droparea">&nbsp;</div>
        <div id="dr5" class="droparea">&nbsp;</div>
        <div id="dr6" class="droparea">&nbsp;</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>