Drap,Drop and clone using jquery & javascript
<p>I am new to jquery ..My req is to clone dynamically created image by on_click and able to drag that cloned object .And should be  able to delete it and capture the position of that image.After trying for a week with ajax controls,now thought of using jquery. If you could suggest some article related to this will help me.I read lot of articles in this wensite,but couldn't come to a solution.</p>

<p>@@</p>

<p>I got the below code to work,but how to add resizable functionality    </p>

<p>$(document).ready(function() {
      //Counter</p>

<pre><code>      counter = 0;
      //Make element draggable
      $(".drag").draggable({ 
          helper: 'clone',
          containment: 'frame',

          //When first dragged
          stop: function(ev, ui) {
              var pos = $(ui.helper).offset();
              objName = "#clonediv" + counter
              $(objName).css({ "left": pos.left, "top": pos.top });
              $(objName).removeClass("drag");


              //When an existiung object is dragged
              $(objName).draggable({
                  containment: 'parent',
                  stop: function(ev, ui) {
                      var pos = $(ui.helper).offset();
                      //console.log($(this).attr("id"));
                      //console.log(pos.left)
                      //console.log(pos.top)
                  }
              });
          }
      });
      //Make the element resizable 


      //Make element droppable
      $("#frame").droppable({ 

          drop: function(ev, ui) {
              if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                  counter++;
                  var element = $(ui.draggable).clone();
                  element.addClass("tempclass");
                  $(this).append(element);
                  $(".tempclass").attr("id", "clonediv" + counter);
                  $("#clonediv" + counter).removeClass("tempclass");

                  //Get the dynamically item id
                  draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                  itemDragged = "dragged" + RegExp.$1
                  //console.log(itemDragged)

                  $("#clonediv" + counter).addClass(itemDragged);
              }
          }
      });
  });
</code></pre>

<p>I have some sample code to resize the image,but i couldn't drop the clone into  my frame</p>

<p>$(document).ready(function() {
      $("#fff").resizable({ handles: "all", ghost: true, autoHide: true }).parent().draggable({ helper: 'clone', containment: 'frame' });</p>

<pre><code>  });
 ***my Code behind .cs class***
 TableCell newcell = new TableCell();
                System.Web.UI.WebControls.Image myImage = new System.Web.UI.WebControls.Image();
                myImage.ID = "imgv" + dt.Rows[datavount]["id"];
                //myImage.Attributes.Add("alt",  myImage.ID+"fffff");
                myImage.Width = Unit.Pixel(30);
                myImage.Height = Unit.Pixel(30);
</code></pre>

<p>Panel newpanel = new Panel();
                    newpanel.ID = "pnl" + myImage.ID;
                    newpanel.BorderStyle = BorderStyle.Outset;
                    newpanel.Controls.Add(myImage);
                    newpanel.Width = Unit.Pixel(50);
                    newpanel.Height = Unit.Pixel(50);
                    newpanel.Attributes.Add("class", "drag");[my jquery function is applied to drag class]
                    newcell.Controls.Add(newpanel);</p>

<p>Thanks,</p>
