Javascript 相对于div的鼠标位置

我正在使用jqueryui进行拖放。我正在尝试获取相对于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 );
  }
});

$（“#db_表”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
drop：函数（事件、用户界面）{
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；
$（''）.html（ui.draggable.html（））.appendTo（this）；
}
});

但是删除的div的位置不正确，有人能告诉我代码有什么问题吗？

看看这里：

编辑： 上面的jquery文档页面已断开。下面是一个备选方案：

event.pageX

和

event.pageY

应该为您提供鼠标位置

$("#drag").draggable({
    stop: function(event, ui){
        var x = event.pageX - ui.offset.left;
        var y = event.pageY - ui.offset.top;       
    }
});

编辑：下面是一个示例，演示如何跟踪鼠标相对于正在拖动的元素的位置

另一编辑：

如果您希望鼠标相对于可拖放对象的位置，则此操作应有效：

$("#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 );
    }
});

$（“#db_表”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
drop：函数（事件、用户界面）{
var offset=$（this）.offset（），
x=event.pageX-offset.left，
y=event.pageY-offset.top；
$（''）.html（ui.draggable.html（））.appendTo（this）；
}
});

---

这里有一个更完整的例子：

但是如何使位置相对于我正在放置的div？你可以在拖动的停止事件中跟踪位置，你只需要从鼠标位置减去元素的偏移量，对不起，我想我误解了。您想要相对于您正在拖动的图元还是相对于您插入的图元的位置？非常感谢。有更好的写作方法吗<代码>''我想这是个人喜好。您可以使用jquery对象$（“”）.css（{marginLeft:x，marginTop:y}）；