Drag, Drop and Resizable

Drag, Drop and Resizable

hey guys i want help

Im creating a mood board using jquery..  i have done till dragging the image and dropping it into the container, now dropped contain are draggable, it should also be resizable im not able code it and also the draggable image shouldbe overlapped when it is active i mean that when i clicked on one should drag and should palced over another image, it should will every time happen when i drag the image should be overlap...


im placing my code below please guys help with this


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></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 type="text/javascript" src="../jquery/ui.resizable.js"></script>

    <style type="text/css">
        body{
            font:normal 12px Verdana;
            margin:0;
            padding:0;
        }
        .wrap{
            width:600px;
            position:relative;
            padding:10px;
        }
        .sourcearea{
            width:150px;
            float:left;
        }
        .items {
            z-index: 100;
        }
        .droparea {
            float:right;
            background-color: #EFEFE0;
            border: 1px solid #EFEFE0;
            width: 250px;
            min-height: 200px;
        }
        .droparea img{
            margin:5px;
        }
        .dropareahover {
            background-color:#EFD2A4;
            border-color:#DFA853;
        }
        .summary{
            padding:10px;
        }
        .summary span{
            font-weight:bold;
        }
    </style>
   
    <script type="text/javascript">
        function tryAlert(){
            alert("blah");
        }
    </script>
   

<!--[if IE 6]>
<style type="text/css">
    .droparea { height: expression(this.scrollHeight < 200 ? "200px" : "auto" ); } /* Min-height Fix*/
</style>
<![endif]-->
</head>
<body>
 <!--  <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 class="items" id="itemsheep">
                   <img id="itemsheepimage" src="img_3.jpg" width="100">
           </span>
          
           <span class="items" id="itemdog">
               <img id="itemdogimage"src="img_4.jpg" width="100">
            </span>
       </div>
      
       <div class="droparea">
                   &nbsp;
       </div>
   </div>
  
   <script>
       var itemDogCtr = 0; itemSheepCtr = 0; itemTotalCtr = 0;
       var dropElem;
      
       $(document).ready(function(){
            //any item with class "items" is draggable
           $(".items").draggable({helper: 'clone',cursor: 'hand'});

           $(".droparea").droppable({
               accept: ".items",
               hoverClass: 'dropareahover',
               tolerance: 'pointer',
               drop:
                       function(ev, ui)
                        {
                           if(itemTotalCtr >= 10)
                                   {
                                 alert("Area is full");
                                 return;
                                 }
              
                               var dropElemId = ui.draggable.attr("id");
                                var dropElem = ui.draggable.html();
                            clone = $(dropElem).clone(); // clone it and hold onto the jquery object                           
                            clone.css("position", "absolute");                             
                              clone.draggable({ containment: 'parent' ,cursor: 'crosshair'});
                           
                              $(this).append(clone);
                           
           
                               if(dropElemId == 'itemdog') itemDogCtr++;
                               if(dropElemId == 'itemsheep') itemSheepCtr++;

                
                           }
                       });
                   });
               
               
   </script>

</body>
</html>