Question

我正在使用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的位置不正确，有人可以告诉我代码有什么问题吗？

Answer 1

看看这里：

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/

另一个编辑：

如果您希望鼠标相对于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 );
    }
});

此处有更完整的示例：http://jsfiddle.net/87fqr/2/

Answer 2

现在是 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

2 个答案: