Menu
I am using jquery ui for drag and drop. I am trying to get mouse position relative to div, here is my code:
$( "#db_tables " ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var x = ui.position.left - ui.offset.left; // tired event.pageX - this.offsetLeft;
var y = ui.position.top - ui.offset.top; // tired event.pageY - this.offsetTop;
$( '<div style="margin-top:' + y + 'px; margin-left:' + x + 'px; "></div>' ).html( ui.draggable.html() ).appendTo( this );
}
});
But the position of dropped div is not correct, Can anybody please tell me what is wrong with code?
908
You can use the jQuery event. pageX and event. pageY in combination with the jQuery offset() method to get the position of mouse pointer relative to an element.
A cursor is a moving placement or pointer that indicates a position. It allows you to locate the current position of the mouse pointer on the screen and indicates where information can be entered or deleted.
Let's look at how to get the user's mouse position and map it into CSS custom properties: --positionX and --positionY . We could do this in JavaScript. If we did, we could do things like make make an element draggable or move a background. But actually, we can still do similar things, but not use any JavaScript!
To get the X and Y coordinates for a div element with JavaScript, we an use the getBoundingXClientRect method. to select the div with querySelector . And then we call getBoundingClientRect to get the position of the div. Then we get the x and y coordinates of the div with position.
Seeing as it's now 2021... for those looking to achieve it without JQuery, here is a demo.
const element = document.getElementById('img');
const globalCursorLabel = document.getElementById('global-cursor-label');
const imgCursorLabel = document.getElementById('img-cursor-label');
const boundsLabel = document.getElementById('bounds-label');
// Bounding rect info
const imgBoundInfo = element.getBoundingClientRect();
boundsLabel.textContent = `Bounding Rect Info: ${JSON.stringify(imgBoundInfo)}`;
element.addEventListener('mousemove', (e) => {
// Mouse position
const globalCursor = { x: 0, y: 0 };
globalCursor.x = e.clientX;
globalCursor.y = e.clientY;
globalCursorLabel.textContent = `Global Position: [x: ${globalCursor.x}px, y: ${globalCursor.y}px]`;
// Position in image considering top left of image to be 0px, 0px
const imgCursor = { x: 0, y: 0 };
imgCursor.x = globalCursor.x - imgBoundInfo.left;
imgCursor.y = globalCursor.y - imgBoundInfo.top;
imgCursorLabel.textContent = `Img Position: [x: ${imgCursor.x}px, y: ${imgCursor.y}px]`;
});body {
display: flex;
flex-direction: column;
}
img {
margin-top: 20px;
margin-left: 20px;
height: 100px;
width: 150px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img id="img" src="https://www.placecage.com/300/200" alt="nick"/>
<label id="global-cursor-label">Hover over Nick</label>
<label id="img-cursor-label">Hover over Nick</label>
<label id="bounds-label"></label>
</body>
</html>Take a look here:
http://docs.jquery.com/Tutorials:Mouse_Position
EDIT: The jquery docs page above is broken. Here is an alternate:
http://api.jquery.com/event.pageX/
event.pageX and event.pageY should give you mouse position
$("#drag").draggable({
stop: function(event, ui){
var x = event.pageX - ui.offset.left;
var y = event.pageY - ui.offset.top;
}
});
EDIT: here's an example showing how to track the mouse position relative to the element you are dragging http://jsfiddle.net/87fqr/1/
ANOTHER EDIT:
This should work if you want the position of the mouse relative to the droppable:
$("#db_tables").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var offset = $(this).offset(),
x = event.pageX - offset.left,
y = event.pageY - offset.top;
$('<div style="margin-top:' + y + 'px; margin-left:' + x + 'px; "></div>' ).html( ui.draggable.html() ).appendTo( this );
}
});
More complete example here: http://jsfiddle.net/87fqr/2/
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
