locked
Moving multiple controls to another position on parent control RRS feed

  • Question

  • User-1994446809 posted

    Hello froum, 

    I have multiple controls (image and label) lying on a parent control on a web page and I am trying to change each control position by using the cursor to move each control to different positions on the parent controls. with the code I have, I could only move one control (which is the label control) but other control can't be moved; when I click on the image control, it is the label control that will be moved.

    Can anyone help me Please?

    HTML and script

    <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" />
        <title>Portrait Certificate</title>
        <!-- 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]-->
        <link rel="stylesheet" type="text/css" href="forprinters.css" media="print" />
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
        <!-- 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>
     
        <!-- Bootstrap CSS CDN -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <!-- <link rel="stylesheet" href="style.css"/>-->
        <link href="css2/style2.css" rel="stylesheet" />
        <link rel="stylesheet" href="style2.css" />
        <!-- Scrollbar Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <style id="table_style" type="text/css">
            #parent {
                ;
                width: 230mm;
                height: 297mm;
                border: solid 1px;
                font-size: 24px;
                text-align: center;
                padding: 1cm;
                margin: 10mm auto;
             
            }
            #child {
                ;
                right: 40px;
                top: 40px;
                cursor: move;
                background-color: #fafafa;
                border: solid 1px #00003D;
                font-size: 24px;
                text-align: center;
                backface-visibility: hidden;
                background: unset;
                height: 90px;
                width: 86px
            }
            #Label1 {
                ;
                left: 150px;
                top: 200px;
                cursor: move;
            }
     
            * {
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
     
            .subpage {
                padding: 0cm;
                border: 5px red solid;
                height: 285mm;
                margin: 0; 
            }
     
            @page {
                size: A4;
                margin: 0;
            }
     
            @media print {
                html, body {
                    width: 210mm;
                    height: 297mm;
                }
                .page {
                    margin: 0;
                    border: initial;
                    border-radius: initial;
                    width: initial;
                    min-height: initial;
                    box-shadow: initial;
                    background: initial;
                    page-break-after: always;
                }
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container" id="centered" style="margin: 0 auto; margin-top: 1%; text-align: justify; text-align: center; margin-left: 5%;">
            </div>
            <asp:Panel ID="pnlContents" runat="server">
                <div class="book">
                    <div class="page" id="parent">
                        <div class="subpage">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/portrait cert.jpg" BorderStyle="None" Width="205mm" Height="280mm" />
                            <div id="child1">
                                <div id="child">
                                    <asp:Image ID="Image2" runat="server" ImageUrl="~/images/qr_code red.png" BorderStyle="None" Width="86px" Height="90px" />
                                </div>
                            </div>
                            <asp:Label ID="Label1" runat="server" Text="Move this Label" Font-Size="XX-Large"></asp:Label>
                        </div>
                    </div>
                </div>
            </asp:Panel>
        </form>
        <script>
            window.onload = addListeners();
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            function addListeners() {
                document.getElementById('Image2').addEventListener('mousedown', mouseDown, false);
                window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                window.removeEventListener('mousemove', divMove, true);
            }
            function mouseDown(e) {
                pos3 = e.clientX;
                pos4 = e.clientY;
                window.addEventListener('mousemove', divMove, true);
            }
            function divMove(e) {
                var lab = document.getElementById('Image2');
                //lab.style.position = 'absolute';
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                lab.style.top = (lab.offsetTop - pos2) + "px";
                lab.style.left = (lab.offsetLeft - pos1) + "px";
            }
        </script>
        <script>
            window.onload = addListeners();
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            function addListeners() {
                document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);
                window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                window.removeEventListener('mousemove', divMove, true);
            }
            function mouseDown(e) {
                pos3 = e.clientX;
                pos4 = e.clientY;
                window.addEventListener('mousemove', divMove, true);
            }
            function divMove(e) {
                var lab = document.getElementById('Label1');
                //lab.style.position = 'absolute';
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                lab.style.top = (lab.offsetTop - pos2) + "px";
                lab.style.left = (lab.offsetLeft - pos1) + "px";
            }
        </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="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <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="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    </body>
    </html>

    Saturday, October 24, 2020 10:11 PM

Answers

  • User-939850651 posted

    Hi georgeakpan233,

    If you need to implement this function for images, please refer to the following code:

    <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" />
        <title>Portrait Certificate</title>
        <!-- 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]-->
        <link rel="stylesheet" type="text/css" href="forprinters.css" media="print" />
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
        <!-- 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>
    
        <!-- Bootstrap CSS CDN -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <!-- <link rel="stylesheet" href="style.css"/>-->
        <link href="css2/style2.css" rel="stylesheet" />
        <link rel="stylesheet" href="style2.css" />
        <!-- Scrollbar Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <style id="table_style" type="text/css">
            #parent {
                ;
                width: 230mm;
                height: 297mm;
                border: solid 1px;
                font-size: 24px;
                text-align: center;
                padding: 1cm;
                margin: 10mm auto;
            }
    
            #child {
                ;
                right: 40px;
                top: 40px;
                cursor: move;
                background-color: #fafafa;
                /*border: solid 1px #00003D;*/
                font-size: 24px;
                text-align: center;
                backface-visibility: hidden;
                background: unset;
                height: 90px;
                width: 86px
            }
    
            #Label1 {
                ;
                left: 150px;
                top: 200px;
                cursor: move;
            }
    
            * {
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
    
            .subpage {
                padding: 0cm;
                border: 5px red solid;
                height: 285mm;
                margin: 0;
            }
    
            @page {
                size: A4;
                margin: 0;
            }
    
            @media print {
                html, body {
                    width: 210mm;
                    height: 297mm;
                }
    
                .page {
                    margin: 0;
                    border: initial;
                    border-radius: initial;
                    width: initial;
                    min-height: initial;
                    box-shadow: initial;
                    background: initial;
                    page-break-after: always;
                }
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container" id="centered" style="margin: 0 auto; margin-top: 1%; text-align: justify; text-align: center; margin-left: 5%;">
            </div>
            <asp:Panel ID="pnlContents" runat="server">
                <div class="book">
                    <div class="page" id="parent">
                        <div class="subpage">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/portrait cert.jpg" BorderStyle="None" Width="200px" Height="200px" />
                            <div id="child1">
                                <div id="child">
                                    <asp:Image ID="Image2" runat="server" ImageUrl="~/images/qr_code red.png" BorderStyle="None" Width="86px" Height="90px" />
                                </div>
                            </div>
                            <asp:Label ID="Label1" runat="server" Text="Move this Label" Font-Size="XX-Large"></asp:Label>
                        </div>
                    </div>
                </div>
            </asp:Panel>
        </form>
        <script>
            window.onload = addListeners();
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            function addListeners() {
                document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
                document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);
                document.getElementById('Image1').addEventListener('mousedown', mouseDown, false);
                window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                window.removeEventListener('mousemove', divMove, true);
            }
            function mouseDown(e) {
                pos3 = e.clientX;
                pos4 = e.clientY;
                window.addEventListener('mousemove', divMove, true);
            }
            function divMove(e) {
                var lab = document.getElementById(e.target.id);
                lab.style.position = 'absolute';
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                lab.style.top = (lab.offsetTop - pos2) + "px";
                lab.style.left = (lab.offsetLeft - pos1) + "px";
            }
        </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="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <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="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    </body>

    Result:

    But if you place the image in a div, then you should move the entire div instead of the image.

    Please refer to Draggable DIV Element.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 26, 2020 5:34 AM
  • User-939850651 posted

    Hi georgeakpan233,

    I used the full code you provided and tested it (yellow part is the modified code). Try to put the window.mouseup event first.

    <div id="child1">
         <div id="child" style="border:2px solid black">
              <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="86px" Height="90px" />
         </div>
    </div>
    <script>
            window.onload = addListeners();
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            function addListeners() {
                window.addEventListener('mouseup', mouseUp, false);
    
                document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
                document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);

    //window.addEventListener('mouseup', mouseUp, false); } function mouseUp() { window.removeEventListener('mousemove', divMove, true); } function mouseDown(e) { pos3 = e.clientX; pos4 = e.clientY; window.addEventListener('mousemove', divMove, true); } function divMove(e) { var lab = document.getElementById(e.target.id); lab.style.position = 'absolute'; pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; lab.style.top = (lab.offsetTop - pos2) + "px"; lab.style.left = (lab.offsetLeft - pos1) + "px"; } </script>

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 29, 2020 3:05 AM
  • User-939850651 posted

    Hi georgeakpan233,

    For your current problem, I have made some attempts, but it seems that the issue you have encountered has always been.

    Until I saw this article: Create a Draggable Element in JavaScript .And I modified part of the code and solved the problem.

    <asp:Panel ID="pnlContents" runat="server">
                                <div class="book">
                                    <div class="page" id="parent">
                                        <div class="subpage">
                                            <asp:image id="image3" imageurl="~/img/background.png" runat="server" borderstyle="none" width="230mm" height="297mm" />
                                            <%--<div id="child1">
                                                <div id="child">--%>
                                                    <asp:Image ID="Image4" ImageUrl="~/img/blue.png" runat="server" BorderStyle="None" Width="86px" Height="90px" />
                                            <%--    </div>
                                            </div>--%>
                                        </div>
                                    </div>
                                </div>
                            </asp:Panel>
    
    <script>
            var dragItem = document.querySelector("#Image4");
            var container = document.querySelector("#subpage");
    
            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>

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 30, 2020 6:48 AM

All replies

  • User-939850651 posted

    Hi georgeakpan233,

    If you need to implement this function for images, please refer to the following code:

    <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" />
        <title>Portrait Certificate</title>
        <!-- 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]-->
        <link rel="stylesheet" type="text/css" href="forprinters.css" media="print" />
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
        <!-- 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>
    
        <!-- Bootstrap CSS CDN -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <!-- <link rel="stylesheet" href="style.css"/>-->
        <link href="css2/style2.css" rel="stylesheet" />
        <link rel="stylesheet" href="style2.css" />
        <!-- Scrollbar Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <style id="table_style" type="text/css">
            #parent {
                ;
                width: 230mm;
                height: 297mm;
                border: solid 1px;
                font-size: 24px;
                text-align: center;
                padding: 1cm;
                margin: 10mm auto;
            }
    
            #child {
                ;
                right: 40px;
                top: 40px;
                cursor: move;
                background-color: #fafafa;
                /*border: solid 1px #00003D;*/
                font-size: 24px;
                text-align: center;
                backface-visibility: hidden;
                background: unset;
                height: 90px;
                width: 86px
            }
    
            #Label1 {
                ;
                left: 150px;
                top: 200px;
                cursor: move;
            }
    
            * {
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
    
            .subpage {
                padding: 0cm;
                border: 5px red solid;
                height: 285mm;
                margin: 0;
            }
    
            @page {
                size: A4;
                margin: 0;
            }
    
            @media print {
                html, body {
                    width: 210mm;
                    height: 297mm;
                }
    
                .page {
                    margin: 0;
                    border: initial;
                    border-radius: initial;
                    width: initial;
                    min-height: initial;
                    box-shadow: initial;
                    background: initial;
                    page-break-after: always;
                }
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="container" id="centered" style="margin: 0 auto; margin-top: 1%; text-align: justify; text-align: center; margin-left: 5%;">
            </div>
            <asp:Panel ID="pnlContents" runat="server">
                <div class="book">
                    <div class="page" id="parent">
                        <div class="subpage">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/portrait cert.jpg" BorderStyle="None" Width="200px" Height="200px" />
                            <div id="child1">
                                <div id="child">
                                    <asp:Image ID="Image2" runat="server" ImageUrl="~/images/qr_code red.png" BorderStyle="None" Width="86px" Height="90px" />
                                </div>
                            </div>
                            <asp:Label ID="Label1" runat="server" Text="Move this Label" Font-Size="XX-Large"></asp:Label>
                        </div>
                    </div>
                </div>
            </asp:Panel>
        </form>
        <script>
            window.onload = addListeners();
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            function addListeners() {
                document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
                document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);
                document.getElementById('Image1').addEventListener('mousedown', mouseDown, false);
                window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                window.removeEventListener('mousemove', divMove, true);
            }
            function mouseDown(e) {
                pos3 = e.clientX;
                pos4 = e.clientY;
                window.addEventListener('mousemove', divMove, true);
            }
            function divMove(e) {
                var lab = document.getElementById(e.target.id);
                lab.style.position = 'absolute';
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                lab.style.top = (lab.offsetTop - pos2) + "px";
                lab.style.left = (lab.offsetLeft - pos1) + "px";
            }
        </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="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <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="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    </body>

    Result:

    But if you place the image in a div, then you should move the entire div instead of the image.

    Please refer to Draggable DIV Element.

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 26, 2020 5:34 AM
  • User-1994446809 posted

    Hi XuDong Peng,

    I really don't know why; when I applied the JavaScript code to my project and viewed in the browser, I got funny displays upon using the cursor to move the controls. I discovered that the parent image was moving too while moving the child image and the web page's footer moved into another position. I did a video clip to show what happened.

    Here is the link to the video clip

    https://youtu.be/_FKPYTly96w

    Here is my full HTML, CSS and JavaScript

    <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"/>
        <title>Certificate</title>
        <!-- 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]-->
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
        <!-- 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>
    
        <!-- Bootstrap CSS CDN -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <!-- <link rel="stylesheet" href="style.css"/>-->
        <!-- <link href="css2/style2.css" rel="stylesheet" />-->
        <!--<link rel="stylesheet" href="style2.css" />-->
        <!-- Scrollbar Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <!-- Font Awesome JS -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.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>
     <style type="text/css">
            .wrapper {
                display: flex;
                width: 100%;
                align-items: stretch;
            }
    
            #sidebar {
                min-width: 250px;
                max-width: 250px;
                min-height: 100vh;
            }
    
                #sidebar.active {
                    margin-left: -250px;
                }
    
            a[data-toggle="collapse"] {
                ;
            }
    
            .dropdown-toggle::after {
                display: block;
                ;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
            }
    
            @media (max-width: 768px) {
                #sidebar {
                    margin-left: -250px;
                }
    
                    #sidebar.active {
                        margin-left: 0;
                    }
            }
    
            body {
                font-family: Constantia;
                background-color: #DCDCDC;
            }
    
            p {
                font-family: 'Poppins', sans-serif;
                font-size: 1.1em;
                font-weight: 300;
                line-height: 1.7em;
                color: #999;
            }
    
            a, a:hover, a:focus {
                color: inherit;
                text-decoration: none;
                transition: all 0.3s;
            }
    
            #sidebar {
                /* don't forget to add all the previously mentioned styles here too */
                background: #355171;
                color: #fff;
                transition: all 0.3s;
            }
    
            #topbar {
                background: #00003D;
            }
    
            #sidebar .sidebar-header {
                padding: 20px;
                background: #355171;
                font-size: medium;
                font-weight: bold;
                font-family:Nunito;
            }
    
            #sidebar ul.components {
                padding: 20px 0;
                border-bottom: 1px solid #47748b;
            }
    
            #sidebar ul p {
                color: #fff;
                padding: 10px;
                font-size: medium;
            }
            #sub-head:hover{
                color:#355171;
            }
            #navbarSupportedContent li a {
                color: #00003D;
                font-family: Constantia;
            }
            #sidebar ul li a {
                padding: 10px;
                font-size: 1.1em;
                display: block;
                font-size: 9pt;
                font-family:Gadugi;
            }
                #sidebar ul li a:hover {
                    color: #7386D5;
                    background: #fff;
                }
    
            #sidebar ul li.active > a, a[aria-expanded="true"] {
                color: #fff;
                background: #355171;
            }
    
            ul ul a {
                font-size: 0.9em !important;
                padding-left: 30px !important;
                background: #4682b4;
            }
             #sidebarCollapse {
                background-color: #355171;
                font-size: x-small;
                max-width: 25px;
                min-width: 25px;
                max-height:25px;
                min-height:25px;
            }
    
            #sideCollapse {
                background-color: #355171;
                font-size: x-small;
                max-width: 26px;
                min-width: 26px;
                max-height:26px;
                min-height:26px;
            }
            #content {
                width: 100%;
                font-size: small;
            }
           #center-content {
               margin-right: 50%;
               ;
           }
           #page {
               align-content: center;
               text-align: center;
           }
           #pnlContents [size="A4"]{
               width:21cm;
               height:29.7cm;
           }
           #pnlContents[size="A4"][layout ="portrait"]{
               width:29.7cm;
               height:21cm;
           }
           @media print{
               body, pnlContents {
                   margin:0;
                   box-shadow: 0;
               }
           }
        </style>
         <style id="table_style" type="text/css">
            #parent {
                ;
                width: 230mm;
                height: 297mm;
                border: solid 1px;
                font-size: 24px;
                text-align: center;
                padding: 1cm;
                margin: 10mm auto;
            }
    
            #child {
                ;
                right: 40px;
                top: 40px;
                cursor: move;
                background-color: #fafafa;
                /*border: solid 1px #00003D;*/
                font-size: 24px;
                text-align: center;
                backface-visibility: hidden;
                background: unset;
                height: 90px;
                width: 86px
            }
            * {
                box-sizing: border-box;
                -moz-box-sizing: border-box;
            }
    
            .subpage {
                padding: 0cm;
                border: 5px red solid;
                height: 285mm;
                margin: 0;
            }
    
            @page {
                size: A4;
                margin: 0;
            }
    
            @media print {
                html, body {
                    width: 210mm;
                    height: 297mm;
                }
    
                .page {
                    margin: 0;
                    border: initial;
                    border-radius: initial;
                    width: initial;
                    min-height: initial;
                    box-shadow: initial;
                    background: initial;
                    page-break-after: always;
                }
            }
        </style>
    </head>
    <body style="font-family: Constantia; background-color:#eeeeee;">
        <form id="form1" runat="server">
         <div class="wrapper">
        <!-- Sidebar -->
             <nav id="sidebar">
                    <div class="list-unstyled sidebar-header">
                        <li>
                            <a><asp:Label ID="named" runat="server" Font-Size="10pt" Text="" ForeColor="White"></asp:Label></a>
                        </li>
                        <li>
                            <a><img alt="" src="images/navbarimg/user-8-xxl.png" height="13"/>&nbsp;<asp:Label ID="user" runat="server" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                        </li>
                        <li>
                            <a><img alt="" src="images/wallet-xxl.png" height="12" />&nbsp;<asp:Label ID="Units" runat="server" Font-Names="Comfortaa" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                        </li>
                    </div>
                    <ul class="list-unstyled components">
                        <li>
                            <a href="Index.aspx">Home</a>
                        </li>
                        <li>
                           <a href="Certificate.aspx">Certificate Document</a>
                        </li>
                        <li>
                            <a href="UploadID.aspx">ID Card</a>
                        </li>
                        <li>
                            <a href="Invoice.aspx">Invoice Documents</a>
                        </li>
                        <li>
                            <a href="Receipt.aspx">Reciept Documents</a>
                        </li>
                        &nbsp;&nbsp;&nbsp;<a id="sub-head" style="color:#999; font-family:Comfortaa; font-size:8pt;">DESIGN</a>
                        <li>
                            <a href="BackgroundTemplates.aspx" style="font-size:8pt;">ID Card Templates</a>
                            <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Certificate Templates**</a>
                        </li>
                    </ul>
                    <ul class="list-unstyled components">
                        <li id="dashboard" runat="server"><a href="#">Profile</a>
                        </li>
                        <li id="Li1" runat="server"><a href="Recorddetail.aspx">Record Details</a>
                        </li>
                    </ul>
                </nav>
               <div id="content" style="font-size: 10pt;">
                    <nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #eeeeee; font-size: small; font-family: 'Comfortaa';">
                        <div class="container-fluid">
                            <button type="button" id="sidebarCollapse" class="btn btn-info">
                                <i class="fas fa-align-left"></i>
                                <span class="sr-only">Toggle Navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                            <h3 style="font-size: medium; font-weight: bolder; font: bolder; color: #00003D;">josSecure</h3>
                            <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <i class="fas fa-align-justify"></i>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                <ul class="nav navbar-nav ml-auto">
                                    <li class="nav-item">
                                        <a class="nav-link" href="Index.aspx" style="font-weight: bolder;">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" style="font-weight: bolder;">About</a>
                                    </li>
                                    <li class="dropdown" id="Pbutton" style="margin-right: 10px;">
                                        <script src="https://js.paystack.co/v1/inline.js"></script>
                                        <asp:Button type="button" ID="lipaybutton" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="wallet" Style="font-size: smaller;" />
                                    </li>
                                    &nbsp;<li class="dropdown" style="margin-right: 10px;">
                                        <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Log Out" Style="font-size: smaller"/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                    <hr />
               <br />
              <div class="line"></div>
               <div class="container" id="centered" style="margin-top: -2%; font-family: 'Comfortaa';">
                   <div class="form-horizontal">
                       <h1 style="font-size: large; margin-top: 0%; color: red;">Certificate with QR Code</h1>
                       <hr />
                       <br />
                       <div class="container" id="centered2" style="margin: 0 auto; margin-top: 1%; text-align: justify; text-align: center; margin-left: 5%;">
                           <asp:Button ID="btnPrint" runat="server" CssClass="btn btn-primary navbar-btn" BackColor="SteelBlue" Width="150px" Height="34px" Font-Size="Medium" Text="Print" OnClientClick="return PrintPanel();" />
                       </div>
                       <asp:Panel ID="pnlContents" runat="server">
                <div class="book">
                    <div class="page" id="parent">
                        <div class="subpage">
                            <asp:Image ID="Image3" runat="server" BorderStyle="None" Width="230mm" Height="297mm" />
                            <div id="child1">
                                <div id="child">
                                    <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="86px" Height="90px" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </asp:Panel>
                   </div>
               </div>
               <footer class="footer">
                  <div class="container1" style="background-color: #D1D1D1; font-size: 8pt; height: 240px; ; margin-bottom: 0%; max-width: 100%;">
                            <p class="pull-right"><a href="#" style="color: #384C6B; font-family: Constantia;">Back to Top</a></p>
                            <div class="container-fluid" style="text-align: center; font-family: Constantia;">
                                <p style="color: #384C6B; font-family: Gadugi; margin-top: 3%; margin-left: 0%;">Contact Address: Nigerian Merit Award House</p>
                                <p style="color: #384C6B; font-family: Gadugi;">Maitama District Abuja, F.C.T</p>
                                <p style="color: #384C6B; font-family: Gadugi;">08138709222 08037445843 08023456781</p>
                                <asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/images/facebk-icon1.png" ImageHeight="15" Font-Size="XX-Small" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebk-icon12.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.twitter.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/images/email-icon-1.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.gmail.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/images/linedin.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.linkedin.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink8" runat="server" ImageUrl="~/images/whatsapp2.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.whatsapp.com">HyperLink</asp:HyperLink>
                            </div>
                            <br />
                            <br />
                            <p style="color: #384C6B; margin-bottom: -4%; font-family: Constantia; font-weight: bold;">Copyright &copy; 2020 Joscheck Tech. All Rights Reserved.</p>
                        </div>
               </footer>
            </div>
             </div>
        </form>
        <script>
            window.onload = addListeners();
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            function addListeners() {
                document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
                document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);
                window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                window.removeEventListener('mousemove', divMove, true);
            }
            function mouseDown(e) {
                pos3 = e.clientX;
                pos4 = e.clientY;
                window.addEventListener('mousemove', divMove, true);
            }
            function divMove(e) {
                var lab = document.getElementById(e.target.id);
                lab.style.position = 'absolute';
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                lab.style.top = (lab.offsetTop - pos2) + "px";
                lab.style.left = (lab.offsetLeft - pos1) + "px";
            }
        </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="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <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="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    
         <script type="text/javascript">
            $(document).ready(function () {
    
                $("#sidebar").mCustomScrollbar({
                    theme: "minimal"
                });
    
                $('#sidebarCollapse').on('click', function () {
                    // open or close navbar
                    $('#sidebar').toggleClass('active');
                    // close dropdowns
                    $('.collapse.in').toggleClass('in');
                    // and also adjust aria-expanded attributes we use for the open/closed arrows
                    // in our CSS
                    $('a[aria-expanded=true]').attr('aria-expanded', 'false');
                });
    
            });
        </script>
         <script>
            function PrintPanel() {
                var panel = document.getElementById("<%=pnlContents.ClientID %>");
                var startStr = "<!--startPrint-->";
                var printWindow = window.open('', '', 'height=500,width=400');
                printWindow.document.write('<html><head><title>Template</title>');
                printWindow.document.write('<style type = "text/css">');
                var table_style = document.getElementById("table_style").innerHTML;
                printWindow.document.write(table_style);
                printWindow.document.write('</style>');
                printWindow.document.write('</head><body >');
                printWindow.document.write(panel.innerHTML);
                printWindow.document.write('</body></html>');
                printWindow.document.close();
                setTimeout(function () {
                    printWindow.print();
                }, 5000);
                return false;
            }
        </script>
    </body>
    </html>

    Wednesday, October 28, 2020 11:07 AM
  • User-939850651 posted

    Hi georgeakpan233,

    I used the full code you provided and tested it (yellow part is the modified code). Try to put the window.mouseup event first.

    <div id="child1">
         <div id="child" style="border:2px solid black">
              <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="86px" Height="90px" />
         </div>
    </div>
    <script>
            window.onload = addListeners();
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            function addListeners() {
                window.addEventListener('mouseup', mouseUp, false);
    
                document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
                document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);

    //window.addEventListener('mouseup', mouseUp, false); } function mouseUp() { window.removeEventListener('mousemove', divMove, true); } function mouseDown(e) { pos3 = e.clientX; pos4 = e.clientY; window.addEventListener('mousemove', divMove, true); } function divMove(e) { var lab = document.getElementById(e.target.id); lab.style.position = 'absolute'; pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; lab.style.top = (lab.offsetTop - pos2) + "px"; lab.style.left = (lab.offsetLeft - pos1) + "px"; } </script>

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 29, 2020 3:05 AM
  • User-1994446809 posted

    Hi XuDong Peng,

    I really appreciate your effort in helping me learn how to move controls and divs in HTML using JavaScript. However, what I tried to achieve is still not as expected; I have two image controls "Image3" is a parent image and "Image4" is child image. When I try to move Image4 on Image3, Image3 also moves from its initial position.

    May I kindly indulge you to watch this video clip to see how it is?

    https://youtu.be/8HR8HIjNA18

    It is only Image4 that should be moved, and not Image3.  I really don't know why Image3 is also moving, as I did not use it in the Javascript. I made a few changes to the HTML to see if it was because of the fact that "Image4" was inside a <div> tag, so I placed "Image4" control on the HTML without it being inside a <div> tag.

    HTML

     <style>
    #parent {
                ;
                width: 230mm;
                height: 297mm;
                border: solid 1px;
                font-size: 24px;
                text-align: center;
                padding: 1cm;
                margin: 10mm auto;
            }
    
            #Image4 {
                ;
                right: 40px;
                top: 40px;
                cursor: move;
                background-color: #fafafa;
                /*border: solid 1px #00003D;*/
                font-size: 24px;
                text-align: center;
                backface-visibility: hidden;
                background: unset;
                height: 90px;
                width: 86px
            }
            .subpage {
                padding: 0cm;
                border: 5px red solid;
                height: 285mm;
                margin: 0;
            }
    </style>
                    <div class="page" id="parent">
                        <div class="subpage">
                            <asp:Image ID="Image3" runat="server" ImageUrl="~/images/cert4.jpg" BorderStyle="None" Width="230mm" Height="297mm" />
                            <asp:Image ID="Image4" runat="server" BorderStyle="None" Width="86px" Height="90px" BorderColor="#000000" BorderWidth="6" />
                        </div>
                    </div>

    JavaScript

     <script>
            window.onload = addListeners();
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            function addListeners() {
                window.addEventListener('mouseup', mouseUp, false);
                document.getElementById('Image4').addEventListener('mousedown', mouseDown, false);
               // document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);
              
            }
            function mouseUp() {
                window.removeEventListener('mousemove', divMove, true);
            }
            function mouseDown(e) {
                pos3 = e.clientX;
                pos4 = e.clientY;
                window.addEventListener('mousemove', divMove, true);
            }
            function divMove(e) {
                var lab = document.getElementById(e.target.id);
                lab.style.position = 'absolute';
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;
                lab.style.top = (lab.offsetTop - pos2) + "px";
                lab.style.left = (lab.offsetLeft - pos1) + "px";
            }
        </script>

    Thursday, October 29, 2020 8:51 AM
  • User-939850651 posted

    Hi georgeakpan233,

    For your current problem, I have made some attempts, but it seems that the issue you have encountered has always been.

    Until I saw this article: Create a Draggable Element in JavaScript .And I modified part of the code and solved the problem.

    <asp:Panel ID="pnlContents" runat="server">
                                <div class="book">
                                    <div class="page" id="parent">
                                        <div class="subpage">
                                            <asp:image id="image3" imageurl="~/img/background.png" runat="server" borderstyle="none" width="230mm" height="297mm" />
                                            <%--<div id="child1">
                                                <div id="child">--%>
                                                    <asp:Image ID="Image4" ImageUrl="~/img/blue.png" runat="server" BorderStyle="None" Width="86px" Height="90px" />
                                            <%--    </div>
                                            </div>--%>
                                        </div>
                                    </div>
                                </div>
                            </asp:Panel>
    
    <script>
            var dragItem = document.querySelector("#Image4");
            var container = document.querySelector("#subpage");
    
            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>

    Result:

    Best regards,

    Xudong Peng

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 30, 2020 6:48 AM
  • User-1994446809 posted

    Hi XuDong Peng,

    Thank you very much for this. I really appreciate

    Friday, October 30, 2020 9:47 AM