절대 위치 지정을 상대 위치로 변환

Question

죄송합니다. 이미이 위치에 있다면 어쨌든 미안하지만 잠시 기다려 봤지만 아무것도 발견하지 못했습니다. x와 y 좌표/페이지에 절대적으로 배치 된 요소의 오프셋을 상대적으로 배치 된 요소로 변경하지만 동일한 시각적 지점에 머물러있게하려면 어떤 방법이 있는지 알고 싶습니다. DOM의 위치 예를 들어, divOne 절대적으로 위치 된 경우이 HTML

<div id="divOne"></div> 
<div id="divTwo"></div> 
<div id="divThree"></div> 

을 주어 시각적으로 divTwo 및 divThree 사이 가을에 위치 일이, 내가 그 X를 변환 할 수있는 방법은 y 위치는 그래서 나는 말할 수있을 것이다,이 divOne 이후 DOM에 divTwo 전에 배치 할 jQuery? 나는 Javascript와 jQuery에 정통하다. 나는 전에 알지 못했을 수도있는 메소드를 찾고있다.

Answer 1

드래그 한 div의 절대 위치를 제거하면 dom의 다른 위치에 태그를 배치하여 위치를 변경해야합니다.

예

시각적으로 사용자가 무엇을해야 #divTwo 및 #divThree 간의 이동 #divOne의 절대 위치를 분리하고 다른 두 div의 사이에 그 태그를 이동되도록하면 #divOne 드래그 경우 :

<div id="divTwo"></div> 
<div id="divOne"></div> 
<div id="divThree"></div> 

잘 정의 된 격자가 있으면이 방법이 효과적입니다.

만약 내가 당신이라면, 그리드의 모든 div에 표준 클래스를 제공하여 다시 정렬 할 수있게하려는 것입니다. 예를 들어, 클래스는 "정렬 가능"합니다. 드래그 엔드가 발생하면 다음 공식을 사용하여 드래그 한 div를 dom에 배치해야하는 위치를 계산합니다.

드래그 한 div는 dom의 다른 위치로 이동해야합니다. 그러면 드래그 한 div가 기존의 div를 대신 잡고 기존의 div를 바로 "푸시"할 것입니다. 예를 들어 #divTho와 #divThree 사이에서 #divOne을 드래그하여 #divOne이 #divThree를 대신 사용하고 그 다음에 푸시합니다. 사용자가 끌어서 놓기를 멈추고 드래그 된 div가 끌어 놓기로 기존 장소 div ("pushedDiv"라고 부름)에있을 때 왼쪽 클릭을 놓았다 고 가정하면 pushedDiv , 돔에서 드래그 한 것을 제거하고 인식 된 것 바로 앞에 놓고 그 위치를 상대적으로 만듭니다.

//on drag end, where mouse has x and y coords: 
var pushedDiv; 
$(".arrangeable").each(function(index,value){ 
    var theoffset = $(this).offset(); 
    if(x >= theoffset .left && x <= theoffset .left + $(this).width() && y >= theoffset .top && y <= theoffset .top + $(this).height()){ 
     pushedDiv = $(this); 
    } 
}); 
// if pushedDiv is still null then the user didn't release the left click over a div of class "arrangeable". Else, the pushedDiv will be the one we are looking for