I am trying to drag and drop multiple elements separately to a preferred position but when I drag one element the other one moves as well.
How can each element separately?
For example, I have 3 elements (Label1, Label2 and Image1 controls). I want to be able to drag each of these controls separately to a desired position inside a particular div tag.
HTML
<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">
<asp:Label ID="lblmail" runat="server" Visible="false"></asp:Label>
<asp:Label ID="labelid" runat="server" Visible="false"></asp:Label><asp:Label ID="createby"
runat="server" Visible="false"></asp:Label><asp:Label ID="role" runat="server" Visible="false"></asp:Label>
<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="btnfront" style="margin: 0 auto; width: 100%; margin-top: 5%;">
<asp:Button ID="Button1" runat="server" CssClass="btn btn-primary navbar-btn" Text="Save Certificate" />
</div>
</div>
</div>
<br />
</div>
</div>
</div>
JavaScript (used to move the elements)
<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>
