Question

My requirements are to:

1. Clone dynamically created image with on_click.
2. Be able to drag that cloned object.
3. Be able to delete it and capture the position of that image.

After tinkering for a week with ajax controls, now I thought of using jQuery. If you could suggest some article related to this it will help me. I read lot of articles on this website, but couldn’t come to a solution.

I got the below code to work, but I don’t know how to add functionality for resizing:

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