Moving DIV, Image or label control with cursor in JavaScript RSS

5 replies

Last post Oct 24, 2020 10:04 PM by georgeakpan233

‹ Previous Thread|Next Thread ›

Shortcuts

georgeakpan2...

Member

66 Points

175 Posts

Moving DIV, Image or label control with cursor in JavaScript

Oct 02, 2020 09:55 PM|georgeakpan233|LINK

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 {
            position: relative;
            width: 230mm;
            height: 297mm;
            border: solid 1px;
            font-size: 24px;
            text-align: center;
            padding: 1cm;
            margin: 10mm auto;
         
        }
        #child {
            position: absolute;
            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 {
            position: absolute;
            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>

- Reply
bruce (sqlwo...
All-Star

58194 Points

15655 Posts

Re: Moving DIV, Image or label control with cursor in JavaScript

Oct 04, 2020 05:35 PM|bruce (sqlwork.com)|LINK

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

bruce (sqlwork.com)

georgeakpan2...

Member

66 Points

175 Posts

Re: Moving DIV, Image or label control with cursor in JavaScript

Oct 05, 2020 11:26 AM|georgeakpan233|LINK

Hi bruce,

bruce (sqlwork.com)
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

XuDong Peng

Contributor

2090 Points

670 Posts

Re: Moving DIV, Image or label control with cursor in JavaScript

Oct 07, 2020 08:49 AM|XuDong Peng|LINK

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

- Reply
georgeakpan2...
Member

66 Points

175 Posts

Re: Moving DIV, Image or label control with cursor in JavaScript

Oct 07, 2020 10:31 AM|georgeakpan233|LINK

Hi XuDongPeng,

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

-Georgeakpan233

georgeakpan2...

Member

66 Points

175 Posts

Re: Moving DIV, Image or label control with cursor in JavaScript

Oct 24, 2020 10:04 PM|georgeakpan233|LINK

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>

‹ Previous Thread|Next Thread ›