how to add Drag and Drop function to dynamic image ?

Question

hello. I created an image to be draggable:

<img id="drag1" src="image/table3.png" draggable="true" ondragstart="drag(event)" width="150" height="150">

however, I want to create the image dynamically:

Image tblImg = new Image();

tblImg.ImageUrl = "image/table3.png";

can i add the function ondragstart="drag(event)" to the dynamic image in the code ?

Manish Kumar Choudhary · Answer

Hi gavriel ankri  Use tblImg .Attributes.Add(  ondragstart    drag(event) ; );

gavriel ankri · Answer

ok. thank you !

Manish Kumar Choudhary · Answer

Hi gavriel ankri  For doing that you have to remove that Image control when you click that button and add another image control after that.

gavriel ankri · Answer

yes. but I want to create another image each time I click the button. if I move the image and then press the button the image come back to the original place

Manish Kumar Choudhary · Answer

int num = 0; num = int.Parse(ViewState[num].ToString()); num++; ViewState[num] = num.ToString(); in Button click. Its working fine its zooming the image.

gavriel ankri · Answer

I created it on Page_load like this: and in the button click I just did num++ protected void Page_Load(object sender EventArgs e) { if (!IsPostBack) { ViewState[num] = 1; } else { int num = int.Parse(ViewState[num].ToString()); if (num > 0) { Image tblImg = new Image(); tblImg.ImageUrl = image/table3.png; tblImg.ID = tblImg + num; tblImg.Width = 40 + num; tblImg.Attributes.Add(ondragstart drag(event);); tblImg.Attributes.Add(draggable true); Panel1.Controls.Add(tblImg); Panel1.DataBind(); } } protected void btnAddTable_Click(object sender EventArgs e) { num = int.Parse(ViewState[num].ToString()); num++; ViewState[num] = num.ToString(); }

Manish Kumar Choudhary · Answer

Hi gavriel ankri A s i think you placed your code inside button click events so every time you click that button new instance of image is created so it goes back.

gavriel ankri · Answer

great. its work ! I can move the dynamic image now but do you know why when I click the button another time everything goes back. I mean I can move the image but when I click the button the image came back to the first place. can I make it stay in the new place after page refresh ?