Generating a diagram in asp.net

[Nilla2010]

I am working on a tool to construct a diagram in asp.net .The user is allowed to select the images from panel [generated dynamically based on user input in dropdown box] and its copy should be created on the diagram area, it should be draggable and should over lay with each other .
So far I am able to create the diagram objects dynamically and on click on each object its copy will be created on the diagram area [I am passing the instance from user control to main page] . I have used Drag Drop Extender to apply Drag behavior. Now my problem is which I create more objects the position of already created objects is not retained in the page. I have js code to retain the position for static controls, but don’t know how to apply for dynamic controls.

[

]
 private void ExtractImage(string aaa, System.Web.UI.WebControls.Image imgbtn)
    {
        string[] temp = aaa.Split('&');
        imgbtn.ImageUrl = temp[0].ToString();
        imgbtn.ID = temp[1].ToString();

        imgbtn.Width = Unit.Pixel(30);
        imgbtn.Height = Unit.Pixel(30);
        imgbtn.Attributes.Add("runat", "server");
        imgbtn.Attributes.Add("cursor", "move");  [its not working]      
            
        Panel newpanel = new Panel();
        newpanel.Width = Unit.Pixel(50);
        newpanel.Height = Unit.Pixel(50);
        newpanel.ID = "pnl" + imgbtn.ID;
        
        newpanel.Controls.Add(imgbtn);[where the copy of each selected image is created]

        AjaxControlToolkit.DragPanelExtender DragImage = new AjaxControlToolkit.DragPanelExtender();
        DragImage.ID = "DragPanelExtenderm_" + temp[1].ToString();
        DragImage.TargetControlID = newpanel.ID;
        DragImage.DragHandleID = newpanel.ID;
        DragImage.BehaviorID = "Dragm" + temp[1].ToString();

        Panel4.Controls.Add(newpanel);
        Panel4.Controls.Add(DragImage);
    }

JS:Its for static controls

 
function pageLoad() {
            // call the savePanelPosition when the panel is moved
            $find('DragP1').add_move(savePanelPosition);
            var elem = $get("<%=HiddenField1.ClientID%>");
            if (elem.value != "0") {
                var temp = new Array();
                temp = elem.value.split(';');
                // set the position of the panel manually with the retrieve value
                $find('<%=Panel1_DragPanelExtender.BehaviorID%>').set_location(new Sys.UI.Point(parseInt(temp[0]), parseInt(temp[1])));
            }}
function savePanelPosition() {
            var elem = $find('DragP1').get_element();
            var loc = $common.getLocation(elem);
            var elem1 = $get("<%=HiddenField1.ClientID%>");
            // store the value in the hidden field
            elem1.value = loc.x + ';' + loc.y;
       }

Am I complicating the whole process ,is there any easy way? .

Thanks,

[Frinavale]

You need to create a unique method for each instance of the "diagram". There are a couple of approaches that you can do to accomplish this. You could implement a Ajax Extender or Behavior to attach to the "diagram" controls...

But it looks like the code you have posted exists within the page of a user control (?? I'm not sure if I'm right here??). If this is the case then you need to make the functions unique to the control by giving the functions unique names....or you need to pass a reference of the control into the method (probably a better approach).

-Frinny

[Nilla2010]

Frinny,
Now i moved to Jquery and able to acheive the required functionalities excep resize and rotate