Javascript的jQuery的如何找到一個HTML元素的座標？

我有一個帶有兩個div元素的html頁面。一個位於頁面的完整左側，它具有classname工具箱。另一個就在工具箱的右側，它具有classname畫布。在工具箱內部，有一個類名爲node1的方形元素。它的寬度和高度均爲50像素。以下代碼可以將節點1從工具箱拖到畫布上。如您所見，有一個名爲x的變量，它是node1的克隆。在node.helper.remove（）之後，我想編寫代碼來查找克隆左上角的座標。座標應該相對於畫布。你能告訴我要寫什麼代碼嗎？Javascript的jQuery的如何找到一個HTML元素的座標？

$(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(); 
    } 
}); 
});

來源

2013-10-14 Avinash

http://api.jquery.com/position/ – Spokey

$(".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 
    } 
});

來源

2013-10-14 11:45:52 alexP

謝謝。這給了我座標，但在這裏我們正在追加x。獲得座標後，是否有辦法將其刪除？怎麼做？我試過$（this）.remove（x）但它沒有工作。 – Avinash

$（x）.remove（）的作品。所以問題解決了。我如何接受你的回答？在這裏我沒有看到任何選擇。 – Avinash

您可以使用.offset()這是相對於文檔和.position這是相關的直接父。

.offset（）返回一個帶有被引用對象的x和y座標的對象。你可以像這樣訪問他們：

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

來源

2013-10-14 10:18:17 Alex

感謝編輯 – Alex

Javascript的jQuery的如何找到一個HTML元素的座標？

回答

相關問題