Retain/Keep new position of elements after drag and drop

Donald Symmons 3,026

Is it possible to keep, save or retain the position of controls after dragging and dropping each one on their respective positions in a div? For example if a user uploads a background design of a certificate, excluding the recipient's name and date. Then on the page, there are

three controls (LabelName, Labeldate and Image1), the user then drags each of these controls to the desired positions on the certificate, and clicks a button to save the certificate. Is it possible to keep the new positions of these controls, even if the user leaves the page? And if the user returns to the page

anytime or day, the saved certificate will remain as the user saved it, with all the controls in their new positions. Also, I want the save certificate to be based on a particular user, and will not relate to other users. Each user can decide to set his or her positions as they please.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" intergrity="sha384-AYmEC3Yw5cVb3ZcuHt0A9w35dYTsvhLPVnYs9eStHfGJv0vKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous" />
    <script defer="" src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" media="all" />
     <title>Certificate</title>
    <style type="text/css">
        html {
            font-size: 72.5%;
        }
        @media screen and (max-width: 600) {
            html {
                font-size: 58%;
            }
        }
        .wrapper {
            display: flex;
            width: 100%;
            align-items: stretch;
            min-height: 100vh;
        }
        #content{
            flex: auto;
        }
 
           .imgfile {
            position: relative;
            object-fit: cover;
            height: auto;
            width: 100%;
            border: none;
            background-repeat: no-repeat;
            background-image:url('');
            background-size:cover;
            background-position: center;
            vertical-align: middle;
            background-color: white;
        }
           #output {
            font-size: 12px;
            text-align: center;
            display: flex;
            align-items: stretch;
            border: none;
        }
           #recipient {
            position: absolute;
            font-size: 3rem;
            bottom: 10px;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
           }
        #dated {
            position: absolute;
            bottom: 10px;
            right: 50px;
            font-size: 2.5rem;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
        }
        #Image1 {
            bottom: 10px;
            cursor: move;
            backface-visibility: hidden;
            background: unset;
           }
    </style>
</head>
<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 17px; font-weight: 400;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <div id="content" style="font-size: 10pt; width: 100%;">
                <div class="grids">
                    <div class="row col-sm-12" style="width: 100%; margin: 0 auto; padding: 6px; margin-right: auto; margin-left: auto; margin-bottom: 20px;">
                        <div class="col-sm-8" style="width: 100%; margin: 0 auto; padding: 6px; margin-bottom: 20px;">
                            <div class="row">
                                <div class="col-md-12" style="width: 100%; margin: 0 auto;">
                                    <div class="form-group">
                                        <asp:Label ID="Label17" runat="server" Style="color: #ba2424; font-weight: 500;">Upload your certificate design, leave the name and date empty on the design image (referred format is .png)</asp:Label>
                                        <div class="input-group">
                                            <asp:FileUpload ID="certuploadfile" runat="server" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div runat="server" class="certcontain" id="output">
                                <asp:Image Class="imgfile" ID="imgfile" runat="server" />
                            </div>
                            <div class="list" draggable="true"></div>
                        </div>
                        <div class="col-sm-4" style="width: 100%; margin: 0 auto; padding: 10px; margin-top: 50px;">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label ID="recipient" runat="server" Text="Recipient Name"></asp:Label>
                                        <asp:Label ID="dated" runat="server" Text="Date"></asp:Label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label CssClass="element" ID="Label8" runat="server">Recipient</asp:Label>
                                        <div class="input-group">
                                            <asp:TextBox ID="TextBox6" runat="server" AutoCompleteType="None" Height="33" CssClass="form-control" placeholder="e.g Charles Johnson" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <asp:Label CssClass="element" ID="Label3" runat="server">Date</asp:Label>
                                        <div class="input-group">
                                            <input type="date" id="TextBoxDate" runat="server" class="form-control" style="font-size: 10pt; height: 33px;" placeholder="e.g. month day, year" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <asp:Image ID="Image1" runat="server" ImageUrl="image.png" BorderStyle="None" Width="86px" Height="90px" />
                            <div class="btndiv" style="margin: 0 auto; width: 100%; margin-top: 5%;">
                                <asp:Button ID="CertBtn" runat="server" CssClass="btn btn-primary navbar-btn" Text="Save Certificate" />
                            </div>
                        </div>
                    </div>
                    <br />
                </div>
            </div>
        </div>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js"></script>
     <script type="text/javascript">
         $(function () {
             var fileUpload = $("[id*=certuploadfile]");
             var img = $("[id*=imgfile]");
             img.click(function () { fileUpload.click(); });
             fileUpload.change(function () {
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("[id*=imgfile]").attr("src", e.target.result);
                 }
                 reader.readAsDataURL($(this)[0].files[0]);
             });
         });
     </script>
    <script type="text/javascript">
        var dragItem = document.querySelector("#recipient");
        var container = document.querySelector("#output");

        var active = false;
        var currentX;
        var currentY;
        var initialX;
        var initialY;
        var xOffset = 0;
        var yOffset = 0;

        document.addEventListener("touchstart", dragStart, false);
        document.addEventListener("touchend", dragEnd, false);
        document.addEventListener("touchmove", drag, false);

        document.addEventListener("mousedown", dragStart, false);
        document.addEventListener("mouseup", dragEnd, false);
        document.addEventListener("mousemove", drag, false);

        function dragStart(e) {
            if (e.type === "touchstart") {
                initialX = e.touches[0].clientX - xOffset;
                initialY = e.touches[0].clientY - yOffset;
            } else {
                initialX = e.clientX - xOffset;
                initialY = e.clientY - yOffset;
            }

            if (e.target === dragItem) {
                active = true;
            }
        }

        function dragEnd(e) {
            initialX = currentX;
            initialY = currentY;
            active = false;
        }

        function drag(e) {
            if (active) {

                e.preventDefault();

                if (e.type === "touchmove") {
                    currentX = e.touches[0].clientX - initialX;
                    currentY = e.touches[0].clientY - initialY;
                } else {
                    currentX = e.clientX - initialX;
                    currentY = e.clientY - initialY;
                }

                xOffset = currentX;
                yOffset = currentY;

                setTranslate(currentX, currentY, dragItem);
            }
        }

        function setTranslate(xPos, yPos, el) {
            el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
        }
    </script>
        <script type="text/javascript">
            var dragDate = document.querySelector("#dated");
            var container = document.querySelector("#output");

            var active = false;
            var currentX;
            var currentY;
            var initialX;
            var initialY;
            var xOffset = 0;
            var yOffset = 0;

            document.addEventListener("touchstart", StartDrag, false);
            document.addEventListener("touchend", EndDrag, false);
            document.addEventListener("touchmove", grab, false);

            document.addEventListener("mousedown", StartDrag, false);
            document.addEventListener("mouseup", EndDrag, false);
            document.addEventListener("mousemove", grab, false);

            function StartDrag(e) {
                if (e.type === "touchstart") {
                    initialX = e.touches[0].clientX - xOffset;
                    initialY = e.touches[0].clientY - yOffset;
                } else {
                    initialX = e.clientX - xOffset;
                    initialY = e.clientY - yOffset;
                }

                if (e.target === dragDate) {
                    active = true;
                }
            }

            function EndDrag(e) {
                initialX = currentX;
                initialY = currentY;
                active = false;
            }

            function grab(e) {
                if (active) {

                    e.preventDefault();

                    if (e.type === "touchmove") {
                        currentX = e.touches[0].clientX - initialX;
                        currentY = e.touches[0].clientY - initialY;
                    } else {
                        currentX = e.clientX - initialX;
                        currentY = e.clientY - initialY;
                    }

                    xOffset = currentX;
                    yOffset = currentY;

                    setTranslate(currentX, currentY, dragDate);
                }
            }

            function setTranslate(xPos, yPos, el) {
                el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
            }
        </script>
</body>
</html>

Lan Huang-MSFT 30,086 Reputation points Microsoft Vendor

2023-12-08T08:24:22.73+00:00

Hi @Donald Symmons,

I still need time to research this post, thank you for your understanding.
Donald Symmons 3,026 Reputation points

2023-12-08T09:12:22.3866667+00:00

Hi @Lan Huang-MSFT , Okay. I posted this question to see if it is possible and also to learn how it can be done. I appreciate you taking time to do this. Thank you very much
Donald Symmons 3,026 Reputation points

2023-12-10T16:45:55.4+00:00

Hi @Lan Huang-MSFT ,

Here is what I want to achieve. I have seen a situation where a user can upload a template. Let's say a certificate, leaving empty some information like name and date. There are two labels for Name and Date. After the user upload the template, the user can edit the Labels for Name and Date, like typing the recipient Name and Date, and also change font names, font size and color. After this has been done, the user then drags the labels for Name and Date to a preferred position on the Certificate and saves it. The new positions of the Labels, as well the fonts, size and colors are saved as well for future use. Then anytime user returns, everything the user designed will be intact. The Labels will be in their positions the user dragged them to, the fonts, sizes and color will same as the user selected.

I guess this explanation should be much clearer.

Thank you

Accepted answer

Lan Huang-MSFT 30,086 Microsoft Vendor

Hi @Donald Symmons,

After some research, I finally found something that might help you. You can use localStorage object to save location and font size color etc.

Because you need to leave the current page and come back with everything there, it is best to upload the image to the server and then save it using a Session.

I wrote a simple example for your reference:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script>
        var positions = JSON.parse(localStorage.positions || "{}");
        $(function () {
            var d = $("[id=draggable1]").attr("id", function (i) {
                return "draggable_" + i
            })
            $.each(positions, function (id, pos) {
                $("#" + id).css(pos)
            })

            d.draggable({
                containment: "#containment-wrapper",
                scroll: false,
                stop: function (event, ui) {
                    positions[this.id] = ui.position
                    localStorage.positions = JSON.stringify(positions)
                }
            });
            $("#clear").click(function () {
                window.localStorage.clear();
                window.location.reload();
            });

        });
    </script>
    <script type="text/javascript">
        function ChangeSize(FontValue) {
            document.getElementById("LabelName").style.fontSize = FontValue;
            document.getElementById("LabelDate").style.fontSize = FontValue;
            localStorage.setItem("font-size", FontValue);
        }
        window.onload = function () {
            var a = document.getElementById("LabelName");
            var b = document.getElementById("LabelDate");
            var fonts = localStorage.getItem("font-size");
            a.style.fontSize = fonts;
            b.style.fontSize = fonts;
        }

    </script>
    <style>
        .draggable {
            width: 200px;
            height: 200px;
            padding: 0.5em;
            float: left;
            margin: 0 10px 10px 0;
            cursor: move;
        }

        .draggable, a {
            cursor: move;
        }

        #draggable, #draggable2 {
            margin-bottom: 20px;
            cursor: move;
        }

        #draggable {
            cursor: move;
        }

        #draggable2 {
            cursor: e-resize;
        }

        #containment-wrapper {
            width: 800px;
            height: 500px;
            padding: 10px;
        }

        h3 {
            clear: left;
        }
    </style>

    <style>
        .draggable {
            width: 200px;
            height: 200px;
            padding: 0.5em;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
        <asp:Label ID="Label17" runat="server" Style="color: #ba2424; font-weight: 500;">Upload your certificate design, leave the name and date empty on the design image (referred format is .png)</asp:Label>
        <div class="input-group">
            <asp:FileUpload ID="FileUpload1" runat="server" />
            <asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="UploadFile" />
        </div>
        <div id="containment-wrapper">


            <div class="grids">
                <div class="row col-sm-12" style="width: 100%; margin: 0 auto; padding: 6px; margin-right: auto; margin-left: auto; margin-bottom: 20px;">
                    <div class="col-sm-8" style="width: 100%; margin: 0 auto; padding: 6px; margin-bottom: 20px;">
                        <div class="row">

                            <div runat="server" class="certcontain" id="output">
                                <asp:Image ID="Image1" runat="server" />
                            </div>
                        </div>
                        <div class="col-sm-4" style="width: 100%; margin: 0 auto; padding: 10px; margin-top: 50px;">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <div id="draggable1" class="ui-widget-content draggable">
                                            <asp:Label ID="LabelName" runat="server" Text="Name"></asp:Label>
                                        </div>
                                        <div id="draggable1" class="ui-widget-content draggable">
                                            <asp:Label ID="LabelDate" runat="server" Text="Date"></asp:Label></div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </div>

        <div class="input-group">
            <asp:DropDownList ID="FontSize" runat="server" CssClass="form-control" onchange="ChangeSize(this.value)">
                <asp:ListItem Value="">Size</asp:ListItem>
                <asp:ListItem Value="10px">10</asp:ListItem>
                <asp:ListItem Value="20px">20</asp:ListItem>
                <asp:ListItem Value="30px">30</asp:ListItem>
            </asp:DropDownList>
        </div>

        <button id="clear">Clear localStorage</button>

        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
        {
          
            if (Session["Image1"] != null)
            {
                Image1.ImageUrl= "~/Files/" + Session["Image1"].ToString();
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Server.Transfer("WebForm2.aspx");
        }
        protected void UploadFile(object sender, EventArgs e)
        {
            string folderPath = Server.MapPath("~/Files/");

            //Check whether Directory (Folder) exists.
            if (!Directory.Exists(folderPath))
            {
                //If Directory (Folder) does not exists Create it.
                Directory.CreateDirectory(folderPath);
            }

            //Save the File to the Directory (Folder).
            FileUpload1.SaveAs(folderPath + Path.GetFileName(FileUpload1.FileName));

            //Display the Picture in Image control.
            Image1.ImageUrl = "~/Files/" + Path.GetFileName(FileUpload1.FileName);
            Session["Image1"] = Path.GetFileName(FileUpload1.FileName);
        }

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.

Donald Symmons 3,026 Reputation points

2023-12-12T10:29:49.3766667+00:00
Hi @Lan Huang-MSFT ,

Thanks a million!

If I may ask more about this particular thread,

You can use localStorage object to save location and font size color etc.

If I save the location of the Name and Date Labels in a localStorage, will it affect the location if I later host the application on a live server?

it is best to upload the image to the server and then save it using a Session

Yes, my image is saved using Session. What if I do same to multiple images? Take for example, I upload a certificate template (in .png), set the Name and Date Labels to the desired locations on the template, then I save. Will that particular Template (image) remain as I designed it? Because I may have to create a Repeater control to display Templates, which I set the labels' location, so when I click on a particular template, it will be redirected and fetched on next page using Session.

Anyways, I will have to try and figure out if I can achieve my requirements, as explained.

Much appreciated @Lan Huang-MSFT
Lan Huang-MSFT 30,086 Reputation points Microsoft Vendor

2023-12-14T07:31:31.75+00:00
Hi @Donald Symmons,

If I save the location of the Name and Date Labels in a localStorage, will it affect the location if I later host the application on a live server?

I don't think this will affect since localStorage stores the data in the user's browser. localStorage allows JavaScript sites and applications to save key-value pairs in a web browser without an expiration date.

Window.localStorage is a read-only property that returns a reference to the local storage object used to store data that is only accessible to the origin that created it.

What if I do same to multiple images?

You just need to set up multiple different sessions.

Take for example, I upload a certificate template (in .png), set the Name and Date Labels to the desired locations on the template, then I save. Will that particular Template (image) remain as I designed it?

Your design will be preserved.You can use the html2canvas library to save a <div> as an image. The saved image will retain your design, please refer to the following code.See the code above for a way to preserve the design when leaving the current page and coming back.

<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <script type="text/javascript"> function ConvertToImage(btnExport) { html2canvas($("#grids")[0]).then(function (canvas) { var base64 = canvas.toDataURL(); $("[id*=hfImageData]").val(base64); __doPostBack(btnExport.name, ""); }); return false; } </script>

<div id="grids"> <%-- ******--%> </div> <asp:HiddenField ID="hfImageData" runat="server" />

protected void ExportToImage(object sender, EventArgs e) { string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1]; byte[] bytes = Convert.FromBase64String(base64); Response.Clear(); Response.ContentType = "image/png"; Response.AddHeader("Content-Disposition", "attachment; filename=HTML.png"); Response.Buffer = true; Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.BinaryWrite(bytes); Response.End(); }
Donald Symmons 3,026 Reputation points

2023-12-15T06:00:46.79+00:00
Hi @Lan Huang-MSFT ,

<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <script type="text/javascript"> function ConvertToImage(btnExport) { html2canvas($("#grids")[0]).then(function (canvas) { var base64 = canvas.toDataURL(); $("[id*=hfImageData]").val(base64); __doPostBack(btnExport.name, ""); }); return false; } </script>

I think I know this code that converts into image and its saved in a hiddenfield. But the issue I have with this is that, it cuts out very huge part of whatever you try to capture.

Here is an example when I tried to capture a certificate I uploaded.

You can see from the below image that it is not the entire certificate that was captured. It just captured the top-left of the certificate document. I don't know why this happens.

Is there a way to correct this please?
Lan Huang-MSFT 30,086 Reputation points Microsoft Vendor

2023-12-15T06:20:46.1633333+00:00

Hi @Donald Symmons,

It won't cut off anything you want to capture.

There is a problem with your own code. This is because your image doesn't display correctly, or you don't convert the correct parts to the image.

If you only use this part of the code in a comment without using the backend code, you won't be able to see the part that is converted to an image.

Are you facing this issue when uploading images or clicking the btnExport button?

It would be best if you could provide your code.

This post has too much code. If possible, you can choose to close this post and open a new one. I'll answer your questions in a new post.

Of course, if you insist on addressing it in this post, that's okay too.

1 additional answer

Bruce (SqlWork.com) 69,656 Reputation points

2023-12-09T16:32:02.2766667+00:00

You can store the coordinates in a hidden field to include in postback. The server could store in a database or cookie. On page render check for saved coordinates.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Retain/Keep new position of elements after drag and drop

1 additional answer

Your answer