Question

我有一个带有两个div元素的html页面。一个在页面的左侧，它有classname工具箱。另一个就在工具箱的右边，它有classname canvas。在工具箱内部，有一个方形的元素，类名为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
    }
});

Javascript jquery如何找到html元素的坐标？

2 个答案: