All geek questions in one place

Hold mouse inside div

I have a div of size 100px, 100px, onmousedown I want to move the object inside this div and I want the mouse to not point anywhere except the div so that my object is placed in the div. The mouse will return to normal onmouseup .

What should javascript be like to keep the mouse inside this div only?

+7
source share
8 answers

Unable to control mouse position using Javascript; but you can take its position to control the object you want ... here is a simple code that almost does this:

 <html> <body> <div id="divID" style="width: 100px; height: 100px; position: absolute; left: 250px; top: 300px; background: #000"></div> <div id="divChild" style="width: 20px; height: 20px; color: #f00; position: absolute; background: #f00;"></div> </body> <script> var div = document.getElementById("divID"); var divChild = document.getElementById("divChild"); mousepressed = 0; function handleMyMouseMove(e) { var mouseX = e.clientX; var mouseY = e.clientY; if(mousepressed) { divChild.style.left = mouseX + "px"; divChild.style.top = mouseY + "px"; } } function handleMyMouseDown(e) { mousepressed = 1; } function handleMyMouseUp(e) { mousepressed = 0; } div.addEventListener("mousemove", handleMyMouseMove, false); div.addEventListener("mousedown", handleMyMouseDown, false); window.addEventListener("mouseup", handleMyMouseUp, false); </script> </html>
+3
source

Impossibly sad ... or happily if you think you can make some advertisements.

Edit: found this discussion where someone offers a new workaround to move the Javascript mouse cursor

+4
source

Like the other guys, you cannot limit the mouse cursor to a specific area. But perhaps this is not what you want. Take a look at this jQuery UI: Constrain Movement demo. It achieves the desired effect by preserving the internal object inside the parent object (see the field "I was contained inside my parent").

 <div class="draggable ui-widget-content"> <p id="draggable5" class="ui-widget-header">I'm contained within my parent</p></div> <script> $(function() { $( "#draggable5" ).draggable({ containment: "parent" }); }); </script>
+3
source

if you need a creative solution, here is what you find very creative:

1: use [element]. requestPointerLock ()
2: create a new mouse cursor image. (you may like it here)
3: create 2 new variables x and y and fix the position of the image to them.
4: write:

 document.addEventListener('mousemove', function(){ x += window.movementX; y += window.movementY; });

5: enter some if statements to hold the mouse image inside the element. make sure the if statements are inside the EventListener above:

 document.addEventListener('mousemove', function(){ x += window.movementX; y += window.movementY; if(x < parseFloat(element.style.left)){ x = parseFloat(element.style.width); } if(x > parseFloat(element.style.left) + parseFloat(element.style.width)){ x = parseFloat(element.style.width) + parseFloat(element.style.width); } if(y < parseFloat(element.style.top)){ y = parseFloat(element.style.top); } if(y > parseFloat(element.style.top) + parseFloat(element.style.height)){ y = parseFloat(element.style.top) + parseFloat(element.style.height); } });

Be sure to replace the "element" with the name of the variable storing your element if you intend to use this exact code.

and don't forget to update the position of your element by assigning x and y to its position every time you use it. try the code below. All these steps are implemented and verified. just tap the screen to start, and press [Esc] to turn it off.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>New webpage</title> </head> <body> <img id="div" src="https://b.sccpre.cat/mypng/small/51- 518482_mouse-svg-cursors-mac-transparent-background-mouse-cursor.png" alt="hi" style="position: absolute; width: 20px; height: 20px;"> <div id="cage" style="width: 200px; height: 200px; background- color: lightgray; left: 0px; top: 0px;"> </div> <h1 id="tx">click to start</h1> </body> <script> var d = document.getElementById('div'); var tx = document.getElementById('tx'); document.addEventListener('click', function(){ var txt = tx.textContent; if(txt === "click to start"){ d.requestPointerLock(); tx.textContent = "click to stop"; } if(txt === "click to stop"){ document.exitPointerLock(); tx.textContent = "click to start"; } }); var x = 0; var y = 0; var cage = document.getElementById('cage'); document.addEventListener("mousemove", function(e){ x += e.movementX; y += e.movementY; if(x < parseFloat(cage.style.left)){ x = parseFloat(cage.style.left); } if(x > parseFloat(cage.style.left) + parseFloat(cage.style.width)){ x = parseFloat(cage.style.left) + parseFloat(cage.style.width); } if(y < parseFloat(cage.style.top)){ y = parseFloat(cage.style.top); } if(y > parseFloat(cage.style.top) + parseFloat(cage.style.height)){ y = parseFloat(cage.style.top) + parseFloat(cage.style.height); } d.style.left = x + 'px'; d.style.top = y + 'px'; }); </script> </html>
+1
source

you cannot control the mouse position using javascript, the only thing you can do is read the mouse position and react to it. Maybe you can move the div so that it is always under the mouse?

0
source

You cannot limit the mouse.

But if you want to restrict another object (for example, one that is dragged by the mouse), you can. But you will need to provide additional information on what and how you are trying to do.

0
source

This is completely impossible, and you should be thankful for that. Your mouse is your main entry into the system, and if browsers could control or command, then the site can do almost nothing.

You can, however, restrict the dragged object in another DIV - jQueryUI draggable (), which makes it incredibly easy.

0
source

I seem to have found a workaround for my project.

I have done the following:
1. Using CSS, disable the default click event for each element of your document.
2. For the body: cursor:none; .
3. Use the div function position:fixed; like a pseudo noise.
4. Use jQuery to track mouse speed and thus to extract your pseudo mouse.
5. Work from there.

Warning: Your real mouse will continue to function normally outside of your web page. My goal did not require pressing any element and, therefore, work.

0
source

Source: https://habr.com/ru/post/886311/

More articles:


All Articles