检索jQuery元素的X和Y位置

Question

我需要获得元素在拖放后的X和Y位置，如何实现？

我想我需要使用droppable回调函数：

$(".portletPlaceHolder").droppable({
    drop: function( event, ui ) {
        //...
    }
});

- blue-sky

---

你的意思是在拖放操作完成后检索被拖放元素的位置吗？ - Samuel Rossille

@Samuel Rossille 没错，我有一个函数可以将位置保存到数据库中，我只需要X和Y坐标。 - blue-sky

你可以在那个拖放回调函数中使用 event.pageX 和 event.pageY 来获取它。 - Prasenjit Kumar Nag

我之前做了一个 JSFiddle 用于测试，你可以在这里查看 http://jsfiddle.net/joycse06/3X3Xa/1/。 - Prasenjit Kumar Nag

@user470184 好的，但是benqus已经给出了正确的答案。 - Samuel Rossille

Answer 1

伙计，你应该阅读整个文档页面：

所有回调函数都接收两个参数：原始浏览器事件和一个准备好的 ui 对象，下面查看此对象的文档（如果将第二个参数命名为 'ui'）：

• ui.draggable - 当前可拖动元素，一个 jQuery 对象。
• ui.helper - 当前可拖动助手，一个 jQuery 对象。
• ui.position - 可拖动助手的当前位置 { top: , left: }
• ui.offset - 可拖动助手的当前绝对位置 { top: , left: }

droppable jQuery manual

$(".portletPlaceHolder").droppable({
    drop: function (evt, ui) {
        var offset = ui.offset;
        console.log(offset.left + "x" + offset.top);
    }
});

- benqus

Answer 2

Use .offset()

<script>
   var p = $("p:last");
   var offset = p.offset();
   p.html( "left: " + offset.left + ", top: " + offset.top );
</script>

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

更新

http://www.jquery4u.com/snippets/jquery-coordinates-element/#.T7YW7Nz9Mi0 http://www.quirksmode.org/js/dragdrop.html http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/clientX.htm

这个很棒，展示了光标移动的动态坐标

http://www.diffusedreality.com/content.html

- Code Spy

Answer 3

您可以使用position()函数来获取元素的上方和左侧位置。

$('yourselector').position();

- jbduzan