I tried to move freely an image control inside another image; it is working a bit but the problem i am having is that when the cursor tries to move the child image horizontally (left and right), the child image is expanded but when I move it vertically (up and down) the child image moves up and down. Here is the HTML and JavaScript used:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Certificate Authentication</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/StyleSheet.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/popper.min.js"></script>
<script src="Scripts/jquery-3.4.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<!--startPrint-->
<style>
#parent {
position: relative;
width: 842px;
height: 595px;
border: solid 2px #00003D;
font-size: 24px;
text-align: center;
}
#child {
position: absolute;
right: 35px;
top: 25px;
cursor: move;
background-color: #fafafa;
border: solid 1px #00003D;
font-size: 24px;
text-align: center;
backface-visibility:hidden;
background:unset;
}
</style>
</head>
<body style=" background-color:#DCDCDC; overflow-x:no-display;">
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlContents" runat="server">
<div id="parent" style="margin: 0 auto; margin-top: 0%;">
<asp:Image ID="Image3" runat="server" Width="842px" Height="595px" />
<div id="child">
<asp:Image ID="Image4" runat="server" BorderStyle="None" Width="105" Height="105" />
</div>
</div>
</asp:Panel>
<asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
</div>
</form>
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("child"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "child")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "child").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
