鼠标相对于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; $( '
' ).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; $('
' ).html( ui.draggable.html() ).appendTo( this ); } }); 

这里有更完整的例子： http ： //jsfiddle.net/87fqr/2/