鼠标相对于 div 的位置
[英]Mouse position relative to div
问题描述
I am using jquery ui for drag and drop.
我正在使用 jquery ui 进行拖放操作。 I am trying to get mouse position relative to div, here is my code:我正在尝试获取相对于 div 的鼠标位置，这是我的代码：
$( "#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?但是下降的div的位置不正确，有人可以告诉我代码有什么问题吗？
2 个解决方案
解决方案1
17 已采纳 2010-09-29 17:55:15
Take a look here:看看这里：
http://docs.jquery.com/Tutorials:Mouse_Position http://docs.jquery.com/Tutorials:Mouse_Position
EDIT: The jquery docs page above is broken.编辑：上面的 jquery 文档页面已损坏。 Here is an alternate:这是一个替代方案：
http://api.jquery.com/event.pageX/ http://api.jquery.com/event.pageX/
event.pageX and event.pageY should give you mouse position event.pageX和event.pageY应该给你鼠标位置
$("#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/编辑：这是一个示例，显示如何跟踪相对于您正在拖动的元素的鼠标位置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/更完整的例子在这里： http : //jsfiddle.net/87fqr/2/
解决方案2
0 2021-07-24 03:26:04
Seeing as it's now 2021... for those looking to achieve it without JQuery, here is a demo.现在是 2021 年......对于那些希望在没有 JQuery 的情况下实现它的人，这里有一个演示。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.