locked
Moving DIV, Image or label control with cursor in JavaScript RRS feed

  • Question

  • User-1994446809 posted

    Hello,

    I recently tried to create a situation where a user can move or shift an image and label controls to any position he or she wants inside a particular div <tag> on a web form. I was able to do that. However,

    I discovered that when I put the cursor on the control that I want to move, the control moves away from the cursor. When the movement goes on, it does not make the web page to scroll if the parent image control is long in height.

    Here is what I tried, if checked you will see what I mean. Please I need help in making it smooth movement. A situation where the control can be moved alongside the cursor’s movement

    HTML 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>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();
     
            function addListeners() {
                document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
                window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                window.removeEventListener('mousemove', divMove, true);
            }
            function mouseDown(e) {
                window.addEventListener('mousemove', divMove, true);
            }
            function divMove(e) {
                var div = document.getElementById('child1');
                div.style.position = 'absolute';
                div.style.top = e.clientY + 'px';
                div.style.left = e.clientX + 'px';
            }
        </script>
        <script>
            window.onload = addListeners();
     
            function addListeners() {
                document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);
                window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                window.removeEventListener('mousemove', LabelMove, true);
            }
            function mouseDown(e) {
                window.addEventListener('mousemove', LabelMove, true);
            }
            function LabelMove(e) {
                var Label = document.getElementById('Label1');
                Label.style.position = 'absolute';
                Label.style.top = e.clientY + 'px';
                Label.style.left = e.clientX + '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>
    

    Friday, October 2, 2020 9:55 PM

All replies

  • User-474980206 posted

    The mouse coordinates are relative to the window. The label and image are relative to their stacking container. If you want them to stay in view, you need to scroll the body or at least their stacking container.

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

    Sunday, October 4, 2020 5:35 PM
  • User-1994446809 posted

    Hi bruce,

    If you want them to stay in view, you need to scroll the body

    Please how do I scroll the body so that they stay in view? 

    Should I make these changes as shown below?

    Changing from this

     <script>
            window.onload = addListeners();
     
            function addListeners() {
                document.getElementById('child1').addEventListener('mousedown', mouseDown, false);
                window.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                window.removeEventListener('mousemove', divMove, true);
            }
            function mouseDown(e) {
                window.addEventListener('mousemove', divMove, true);
            }
            function divMove(e) {
                var div = document.getElementById('child1');
                div.style.position = 'absolute';
                div.style.top = e.clientY + 'px';
                div.style.left = e.clientX + 'px';
            }
        </script>

    To this

    <script>
            Label.onload = addListeners();
     
            function addListeners() {
                document.getElementById('Label1').addEventListener('mousedown', mouseDown, false);
                Label.addEventListener('mouseup', mouseUp, false);
            }
            function mouseUp() {
                Label.removeEventListener('mousemove', LabelMove, true);
            }
            function mouseDown(e) {
                Label.addEventListener('mousemove', LabelMove, true);
            }
            function LabelMove(e) {
                var Label = document.getElementById('Label1');
                Label.style.position = 'absolute';
                Label.style.top = e.clientY + 'px';
                Label.style.left = e.clientX + 'px';
            }
        </script>

    Please I need guidance

    Monday, October 5, 2020 11:26 AM
  • User-939850651 posted

    Hi georgeakpan233,

    According to your description, I created an example using your code, and found a simple tutorial and modified part of the code to fix it.

    <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>

    Result:

    You need to record the position of the control when mousedown, and also record the current position at all times for calculations when moving. Namely pos3(clientX) and pos4 (clientY).

    Hope this can help you.

    Best regards,

    Xudong Peng

    Wednesday, October 7, 2020 8:49 AM
  • User-1994446809 posted

    Hi XuDongPeng,

    Thank you for the knowledge. I really appreciate your help.

    -Georgeakpan233

    Wednesday, October 7, 2020 10:31 AM
  • User-1994446809 posted

    Hi XuDong Peng,

    I later discovered that the script code only moves one control (which is the label control), but the image control could not be moved just like the label control.

    I used the same code to try to move the image control but changed the label control name to that of image control and it did not work. And on the parent control, I have other label controls and image control which I will like to move to any position I want, Not just a single label control. Can you please help me out?

    Here is what I did with the earlier code;

        <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>

    Saturday, October 24, 2020 10:04 PM