Drag, drop and clone using jQuery & Javascript

Question

My requirements are to:

Clone dynamically created image with on_click.
Be able to drag that cloned object.
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,

Nick Craver · Accepted Answer · 2010-09-21 15:53:56Z

2

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

answered Sep 21, 2010 at 15:53

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Vani Over a year ago

Thanks Nick . I couldn't get it to work and i guess the problem is the jquery library i am using in .aspx page. I need to achieve all behaviors. Please suggest the jquery library and i am using IE7.

Nick Craver Over a year ago

@Vani - Which version of jQuery and jQuery UI are you using?...if the above isn't working, you should be getting a JavaScript error of some sort in the lower left of the browser.

Vani Over a year ago

Nick.The functionality is not working with error Microsoft JScript runtime error: Object doesn't support this property or method.the version is jquery-1.4.2.js.So my question is do i need to include any other specific script for drag,drop and clone function?

Nick Craver Over a year ago

@Vani - which version of jQuery UI, and are you running this inside a document.ready function?

Vani Over a year ago

Nick,its working but not as i expected . <script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/…> I couldn't drop the clone to a desire position and i know i have to make some changes in code ,will ask u if i need any help. Thanks a lot for ur time & support.

|

Collectives™ on Stack Overflow

Drag, drop and clone using jQuery & Javascript

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related