Saving multiple draggable divs in their new positions

Question

I have been able to use that to create drag and drop for multiple divs. What I mean is, whatever position a user drags and drops any div tag, and user clicks the save button, everything on that page will be saved as seen. Then whenever the user returns, and retrieves the saved design, everything will be exactly as the user designed it.

In a solution from this question: https://learn.microsoft.com/en-us/answers/questions/1458105/retain-keep-new-position-of-elements-after-drag-an, I am trying to save the new positions of the divs. But in this Javascript that saves the positions in localStorage, one id is being used.

In a nutshell, here is what I want to achieve: I am trying to give a user the option of designing his or her invoice without making the user use a default invoice design. So when a user navigates to the design page, the user will have the option to upload an image and use as the background of the invoice, also the user can drag and drop certain elements in the positions that suits the user. With this idea in my mind, I have created this HTML and Javascript that lets the user upload a background, drag and drop elements to the desired positions. Also, there are features that will enable a user change the color of labels on the invoice document, and choose the preferred font. In the solution you gave me, the drag and drop feature happened on an image control, but here the drag and drop is on a div tag with id="parent".

I'm guessing that maybe storing the cordinates of this new positions would be okay. So that whenever a user return in another day or time, the divs(labels) and logo image will be in the new positions. But how do I store the cordinates of new positions in a hiddenfield and check for the saved cordinates on Page render? Ultimately, these are the things I aim to achieve with this:

Drag and drop divs in any position and save the new positions
Be able to use ew-color-picker to choose color and effect the color on the labels in the invoice
When I choose a font family and save it in database, I should be able to fetch the font from database and make effect it on the labels.
And finally, make the background image fit into the div correctly. Because when I tried background-size: contain; the image covered the div but parts of the image overflow the div

Here is my complete HTML and JavaScript



    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
        
        
            
                
                    
                        
                            
                                
                                    Upload Background
                                    
                                        
                                    
                                
                            
                        
                        

                        
                            
                                
                                    Choose Font
                                    
                                        
                                    
                                
                            
                        
                        

                        
                            
                                
                                    Font color
                                    
                                        
                                        
                                            
                                            
                                            
                                           
                                            
                                                
                                                    
                                                
                                            
                                        
                                    
                                
                            
                        
                    
                
                
                    
                        
                            
                                
                                    INVOICE
                                
                                
                                    
                                        
                                    
                                    
                                        
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        
                                    
                                
                                
                            
                            
                            
                                
                                    Bill To:
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                
                                
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                            
                                        
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                            
                                        
                                    
                                
                                
                            
                            
                            
                                
                                    
                                        
                                        
                                         
                                    
                                    
                                          
                                                
                                    
                                    
                                          
                                                
                                    
                                    
                                          
                                                
                                    
                                    
                                        
                                         
                                    
                                
                            
                            
                                
                                
                                    
                                    

                                    Company
                                
                                
                                    
                                
                            
                            
                                Invoice Note

C#

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                SetInitialRow();
                foreach (GridViewRow row in Gridview1.Rows)
                {
                    if (row.RowType == DataControlRowType.DataRow)
                    {
                        TextBox lblAmnt = row.FindControl("lblAmount") as TextBox;
                        lblAmnt.Attributes.Add("readonly", "readonly");
                    }
                }
            }
        }
        private void SetInitialRow()
        {
            DataTable dt = new DataTable();
            DataRow dr = null;
            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Column1", typeof(string)));
            dt.Columns.Add(new DataColumn("Column2", typeof(string)));
            dt.Columns.Add(new DataColumn("Column3", typeof(string)));
            dt.Columns.Add(new DataColumn("Total", typeof(string)));
            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Column1"] = string.Empty;
            dr["Column2"] = string.Empty;
            dr["Column3"] = string.Empty;
            dr["Total"] = string.Empty;
            dt.Rows.Add(dr);

            ViewState["CurrentTable"] = dt;

            Gridview1.DataSource = dt;
            Gridview1.DataBind();
        }

Accepted Answer

Hi @Donald Symmons,

Drag and drop divs in any position and save the new positions

In the solution you gave me, the drag and drop feature happened on an image control, but here the drag and drop is on a div tag with id="parent".

You can use the answer provided in the link. The previously provided answer also uses

. Because multiple elements need to be dragged, saving coordinates is a huge project.

This method is relatively simple. You can change the ID of all elements that need to save their position to draggable1. Then implement the draggable() method according to the class ui-widget-content.

Be able to use ew-color-picker to choose color and effect the color on the labels in the invoice

I don't know much about ew-color-picker, my thought is that maybe you can just use .

 
     
         
             Font color

When I choose a font family and save it in database, I should be able to fetch the font from database and make effect it on the labels.

You asked this question before, maybe you can confirm the information further in the original post.

https://learn.microsoft.com/en-us/answers/questions/1533474/how-do-i-retrieve-a-saved-font-family-and-use-it-o

And finally, make the background image fit into the div correctly. Because when I tried background-size: contain; the image covered the div but parts of the image overflow the div

Use background-size: 100% 100%;

All CODE



    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    


    
        
        
            
                
                    
                        
                            
                                
                                    Upload Background
                                    
                                        
                                    
                                
                            
                        
                        

                        
                            
                                
                                    Choose Font
                                    
                                        
                                    
                                
                            
                        
                        

                        
                            
                                
                                    Font color
                                    
                                          
                                    
                                
                            
                        
                    
                
                
                    
                        
                            
                                
                                    INVOICE
                                
                                
                                    
                                        
                                    
                                    
                                        
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        
                                    
                                
                                
                            
                            
                            
                                
                                    Bill To:
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                
                                
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                    
                                        
                                    
                                
                            
                            
                                
                                    
                                        
                                            
                                        
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                    
                                        
                                            
                                            
                                        
                                    
                                
                                
                            
                            
                            
                                
                                    
                                        
                                        
                                         
                                    
                                    
                                          
                                                
                                    
                                    
                                          
                                                
                                    
                                    
                                          
                                                
                                    
                                    
                                        
                                         
                                    
                                
                            
                            
                                
                                
                                    
                                    

                                    Company
                                
                                
                                    
                                
                            
                            
                                Invoice Note

Best regards,
Lan Huang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Saving multiple draggable divs in their new positions

0 additional answers