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.
My Full WebForm
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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>
<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>
<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>
