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>;) <p>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> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
