JavaScript를 사용하여 DOM 요소 2 개 사이의 상대 위치 얻기

Question

jQuery를 사용하여 일부 컨테이너에 드롭 할 수있는 드래그 가능한 요소 집합을 구현했습니다. 필요한 것은 사용자 상호 작용없이 요소를 특정 컨테이너로 이동시키는 애니메이션입니다. 문제는 요소와 놓기 컨테이너가 DOM의 다른 부분 인 에 있고 대부분 float을 사용하여 배치되어 있다는 것입니다.

내가 선호하는 것은 2 개의 부동 DOM 요소 사이의 절대 위치 차이를 얻기위한 코드이다. 선호하는 것은 jQuery를 사용하는 것이다. 내가 발견 한 유일한 것은 위쪽으로 DOM을 구문 분석하는 해킹 이었지만 항상 브라우저와 관련이있었습니다 (예 : "Firefox 또는 IE 또는 기타와 잘 작동하지 않음"). 단지 API 고개, 그래서 당신이 다음을 수행 할 수 있습니다 가정 할 수있다,

var distance = $(element1).distanceTo($(element2)); 

Answer 1

내가 jQuery를 사용한 적이 : jQuery를 표기

var distance = getDistance(element1, element2); 

나 :

최저은 다음과 같이 될 것이다 :

 
var o1 = $(element1).offset(); 
var o2 = $(element2).offset(); 
var dx = o1.left - o2.left; 
var dy = o1.top - o2.top; 
var distance = Math.sqrt(dx * dx + dy * dy); 

Answer 2

순수 자바 스크립트 사용

var dx = obj1.offsetLeft - obj2.offsetLeft; 
var dy = obj1.offsetTop - obj2.offsetTop; 
var distance = Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2)); 

Answer 3

다음은 어떻게됩니까?

var isIE = navigator.appName.indexOf("Microsoft") != -1; 

function getDistance(obj1, obj2){ 
    var obj1 = document.getElementById(obj1); 
    var obj2 = document.getElementById(obj2); 
    var pos1 = getRelativePos(obj1); 
    var pos2 = getRelativePos(obj2); 
    var dx = pos1.offsetLeft - pos2.offsetLeft; 
    var dy = pos1.offsetTop - pos2.offsetTop; 
    return {x:dx, y:dy}; 
} 
function getRelativePos(obj){ 
var pos = {offsetLeft:0,offsetTop:0}; 
while(obj!=null){ 
    pos.offsetLeft += obj.offsetLeft; 
    pos.offsetTop += obj.offsetTop; 
    obj = isIE ? obj.parentElement : obj.offsetParent; 
} 
return pos; 
} 
// 
var obj = getDistance("element1","element2") 
alert(obj.x+" | "+obj.y);