Drap,Drop and clone using jquery & javascript

Question

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.

@@

I got the below code to work,but how to add resizable functionality

$(document).ready(function() { //Counter

      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);
              }
          }
      });
  });

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

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

  });
 ***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);

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);

Thanks,

Answer 1

It sounds like jQuery UI Draggable is exactly what you're after. You'd use the helper: 'clone' option for the cloning, like this:

$("img").draggable({
  helper: "clone"
});

You can attach whatever behaviors you want with the drop event, for example adding a close button, getting the position, etc, for example:

$("img").draggable({
  helper: "clone",
  stop: function(e, ui) {
    var top = ui.position.top;   //new left position of cloned/dragged image
    var left = ui.position.left; //new top position of cloned/dragged image
  }
});