javascript - Javascript jquery 如何找到一个html元素的坐标？

Question

我有一个带有两个 div 元素的 html 页面。一个在页面的最左侧，它有类名工具箱。另一个就在工具箱的右侧，它有类名画布。在工具箱内，有一个类名为 node1 的方形元素。它的宽度和高度各为 50 像素。下面的代码可以将 node1 从工具箱拖到画布上。如您所见，有一个名为 x 的变量是 node1 的克隆。就在 node.helper.remove() 之后，我想编写代码来查找克隆左上角的坐标。坐标应该相对于画布。你能告诉我要写什么代码吗？

$(document).ready(function(){
$(".node1").draggable({
    helper: 'clone',    // cloning the node/icon.
    cursor: 'move'      // move with cursor.
})

$(".canvas").droppable({

    drop: function(event, node) 
    {

        var x = node.helper.clone();

        x.draggable({
                containment: '.canvas'
                    });

        node.helper.remove();   
    }
});
});

Answer 1

您可以使用与文档相关的.offset()和与直接父级相关的.position 。

.offset() 返回一个具有引用对象的 x 和 y 坐标的对象。您可以像这样访问它们：

$('Element').offset().top;
$('Element').offset().left;

Answer 2

$(".node1").draggable({
    helper: 'clone',
    cursor: 'move',
});

$(".canvas").droppable({
    drop: function (event, node) {
        var x = $(node.helper).clone();
        $(this).append(x);
        console.log($(x).position()); //Returns top/left Coordinates
    }
});