鼠標相對於 div 的位置
[英]Mouse position relative to div
問題描述
我正在使用 jquery ui 進行拖放操作。 我正在嘗試獲取相對於 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 );
}
});
但是下降的div的位置不正確，有人可以告訴我代碼有什么問題嗎？
2 個解決方案
解決方案1
17 已采納 2010-09-29 17:55:15
看看這里：
http://docs.jquery.com/Tutorials:Mouse_Position
編輯：上面的 jquery 文檔頁面已損壞。 這是一個替代方案：
http://api.jquery.com/event.pageX/
event.pageX和event.pageY應該給你鼠標位置
$("#drag").draggable({
stop: function(event, ui){
var x = event.pageX - ui.offset.left;
var y = event.pageY - ui.offset.top;
}
});
編輯：這是一個示例，顯示如何跟蹤相對於您正在拖動的元素的鼠標位置http://jsfiddle.net/87fqr/1/
另一個編輯：
如果您想要鼠標相對於放置項的位置，這應該有效：
$("#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 );
}
});
更完整的例子在這里： http : //jsfiddle.net/87fqr/2/
解決方案2
0 2021-07-24 03:26:04
現在是 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>
將div相對於鼠標位置定位
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.