Javascript comparing mouse click to xy to that of button - javascript

I am trying to get the x and y of an html button to that of a mouseclick by the user, I am doing this as follows:
function buttonPressed(event, id){
var mainEvent = event ? event : window.event;
var mousex=event.clientX;
var mousey=mainEvent.screenY;
var y= $('#'+id).position();
var x= document.getElementById(id).offsetLeft;
console.log(y);
console.log(mousey);
This shows 2 different ways to get these value of both the button and the mouse (event.clientX,mainEvent.screenY,$('#'+id).position()(uses jquery),and offsetLeft).
However none of these techniques seem to work as I would like them to as the values do not line up ie when I click on the top left of the button the values are not the same or even similar. Additionally it seems like the difference changes, for example: if I have a button top left and one top right on the top left the values may differ by 100, whereas the bottom they will differ by -100. How can I acheive what I am wanting (to be able to compare the mousex and the button x)?

client X/Y Mouse pointer X/Y coordinate relative to window
offset X/Y Mouse pointer X/Y coordinate relative to element that fired the event
screen X/Y Relative to the top left of the physical screen/monitor
Thats why you are getting difference here
var mousex=event.clientX;
var mousey=mainEvent.screenY;
Use clientX for both

Related

How to move an unknown object to center screen? HTML/CSS/JS

I am developing a VueJS project and have created a set of cards appearing on the page, when one of these cards is selected, I wish for it to move to centre screen but keep the position it has moved from in the list of options.
I know that by changing the position from 'unset' to 'relative' the card now has move functionality with 'left', 'top' etc. but I still need to find a way to automatically move the card to centre screen regardless of where on the screen the card is moving from.
Does anyone know how to achieve this with the use of JS?
I imagine there is a way of receiving the current location of the node and moving it to the center of the screen, but I am not sure on the specifics of how to achieve it...
Image for context:
CardsProject
EDIT: I have for now gone with rendering an absolute position for the card which means there's no CSS transition from the card's original place to the centre of the screen and the card also temporarily loses its place within the deck.
Before click: click here for image
After click: click here for image
I found the answer after many, many hours of scouring the internet and deepfrying my code.
The answer: Don't use 'relative' positioning!
There's a far nice option to hold the position the element is moving from, but allow for the item to move freely with the use of CSS' top or left etc. and this option is position:sticky;!
With this and the use of JavaScript's coordinates documentation
.getBoundingClientRect()
...I managed to solve the mystery. The function I made to pull a vector between the current object and it the centre of the screen can be found here, returning an array of size 2 of X and Y vectors respectively.
function calcCenterMove(element){
/*
X and Y are the current position of the element to be moved (top left corner).
Width and Height are the width and height of the element to be moved.
CX and CY are the X and Y coordinates of the centre of the screen.
*/
var x = element.getBoundingClientRect().x;
var y = element.getBoundingClientRect().y;
var width = element.getBoundingClientRect().width;
var height = element.getBoundingClientRect().height;
var cx = window.innerWidth / 2;
var cy = window.innerHeight / 2;
var xVector = cx-(width/2)-x;
var yVector = cy-(height/2)-y;
return [xVector, yVector];
}
var xAxisMove = calcCenterMove(element)[0];
var yAxisMove = calcCenterMove(element)[1];
element.style = "transform: translate("+xAxisMove+"px,"+yAxisMove+"px);";
I have paired the above code with a z-index to place the element above all others, and a screen dimming cover, to prevent the user from scrolling elsewhere or interacting with any other options.
Issues still arise here if the user resizes the screen, but I believe that is a different issue to address, possibly by using an event listener to assess a window resize and translate the element from the previous centre to the new centre using the same cx and cy properties above (or perhaps even the entire function!).
Nevertheless, I have come to the answer I was looking for, anyone feel free to use the code above, if needed!
Here are images for reference:
Before click
After click
Regards!

issue with offset calculation of zoomed element based on screen

I'm trying to calculate the coordinates of a zoomed in image based on the pageX and pageY coordinates given to me by a PanResponder. I figured I would just have to add the offset of the X and Y to the coordinates given back to me but I seem to have misjudge what would have to happen.
The coordinates of the device screen regardless of scale seem to correlate to the same location on the zoomed element. So if I place something in the top left of the device screen it goes to that location on the zoomed in element.
I get my offset by measuring the zoomed element with RCTUIManager and it seems to give back the correct values for the X and Y offset based on other calculations I have tested.
This is the most recent iteration of the code I have attempted to use:
let {measureData} = this.state;
let offsetX = measureData.x;
let offsetY = measureData.y
let x = (e.nativeEvent.pageX) - offsetX;
let y = (e.nativeEvent.pageY) - offsetY;
I'm subtracting because the values I receive are negative, I also will allow them to pan this later so I had hoped it would work correctly if they moved it so the value was positive to subtract it.
measureData contains the values from the RCTUIManager which gets updated every time a zoom event occurs.
How I update measureData
setMeasureData = () => {
RCTUIManager.measure(ReactNative.findNodeHandle(this.refs['wrap']), (x, y, width, height, pageX, pageY) => {
this.setState({
measureData: {x, y, width, height, pageX, pageY}
})
});
}
This is called in a callback function after the zoom is changed.
The elements I'm trying to add are added using another component I feed the X Y values into, this component uses Animated.ValueXY() with the calculated coordinates to place the image in the correct starting location for them to be able to drag it after.
The current calculation makes anything placed go down and right of the touch event. I'm not sure where my logic or calculations are wrong with this. I'm hoping someone may have some insight into where my calculation or thought process is wrong.
Ok so my logic was correct and wrong all at the same time. The problem was when they zoom in the X Y values stay the same so I am looking at "less" pixels within the viewport meaning I had to divide the X Y coordinates from the native event by the scale then add the offset in order for me to get the correct x and y values.

simulate click on drop where dropped

This is my first time posting, and I wouldn't be posting if I hadn't researched for hours how to do this.
I want to drag and drop an item onto a div that triggers a click on the location where it was dropped. I got the part where it drags and whatnot, but am unable to trigger a click (simulated).
Please let me know if you can help! I'd love some peace of mind lol.
<3 Lara
Call a function when the item is dropped:
<div ondrop="dropFunction(event)"></div>
In that function, you need to collect the mouse coordinates:
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
And then trigger a click at those coordinates:
document.elementFromPoint(x, y).click();
The mouse coordinates created above are for where the cursor is on the screen. You may want to adjust these coordinates based on the shape of the object being dropped.

relative mouse coordinates in a DIV - javascript

I'm moving the mouse over a div and I want to know the mouse coordinates with respect to the div origin. (upper left corner)
I expected the mousemove event to contain the relative (client?) coordinates of the mouse, but apparently it doesn't.
In firefox for instance, none of the event properties* contain relative coordinates
Am I missing something?
*clientX,Y - pageX,Y - screenX, y
You're not missing anything, but you'll need to calculate the relative coordinates yourself.
Something along these lines should do it (substitute jquery with w/e code you want to use to get the position):
var pos = $('div').position();
var relX = event.pageX - pos.left;
var relY = event.pageY - pos.top;
Also see: JS: mouse coordinates relative to an element which covers some of the details on supporting other browsers (though if you're using jquery that may not be needed).

scroll window when mouse moves

Hello allWhat I mean is while the mouse is moving towards the edge of the window (x or y or both), I want the page to scroll, and when the mouse stops moving, I want the page to stop scrolling.There are numerous examples of how to scroll based on using a onClick event or a scroll zone at the edge of a window, but not much based on the movement of the mouse cursor.
Any help would be much appreciated.
Web pages are already designed to scroll using the scroll bar, page/home/end/arrow keys, etc. Is there any reason that's insufficient for your page? It's usually not a good idea to alter expected functionality.
You can read up on the mousemove event here. Anyway, the code below should work, but I really don't recommend using it. It can be especially disorienting for people with sensitive mice:
// Variables for current position
var x, y;
function handleMouse(e) {
// Verify that x and y already have some value
if (x && y) {
// Scroll window by difference between current and previous positions
window.scrollBy(e.clientX - x, e.clientY - y);
}
// Store current position
x = e.clientX;
y = e.clientY;
}
// Assign handleMouse to mouse movement events
document.onmousemove = handleMouse;

Categories