如何从jQuery ui draggable获取位置x和y？

这里有一个例子http://jsfiddle.net/naqbq/

重新定位图像后，如何获取x和y当前位置？

Answer 1

在stop回调中，您可以使用ui.helper访问拖动的元素。 然后使用offset ，就像Brad建议的那样：

 $("#image").draggable({ stop:function(event,ui) { var wrapper = $("#wrapper").offset(); var borderLeft = parseInt($("#wrapper").css("border-left-width"),10); var borderTop = parseInt($("#wrapper").css("border-top-width"),10); var pos = ui.helper.offset(); $("#source_x").val(pos.left - wrapper.left - borderLeft); $("#source_y").val(pos.top - wrapper.top - borderTop); alert($("#source_x").val() + "," + $("#source_y").val()); } });​ 

然后，只需将其调整到您的包装器 – 减去其偏移量和边框的宽度 – 并将其设置为输入的val 。 （对不起硬编码边框，但我无法使用css提取它） （ 编辑 ：它就是！在另一个问题中找到解决方案）

http://jsfiddle.net/mgibsonbr/naqbq/4/

Answer 2

你可以使用jQuery的.offset() 。

http://api.jquery.com/offset/

 alert($('#image').offset().top); alert($('#image').offset().left); 

Answer 3

你应该使用内置的stop事件：

 $("#image").draggable({ stop: function() { // check for positioning here using .css or .offset } }); 

Answer 4

你可以获得top和lef：

 $('selector').draggable({ drag: function(event, ui) { ui.position.top; // .left // or $('selector').position().top; // current position of an element relative to the offset parent $('selector').offset(); // retrieves the current position relative to the document. } })