parent의 right와 bottom 값으로 드래그 가능한 자식을 어떻게 제한 할 수 있습니까?

Question

나는 드래그 할 수있는 맵을 만들려고합니다. 드래그 가능한 자식을 왼쪽 및 위쪽으로 제한하는 방법을 찾았지만 오른쪽 및 아래쪽면에 대해 동일한 작업을 수행하는 방법을 파악할 수 없었습니다.

부모의 오른쪽 및 아래쪽 값으로 draggble 자식을 어떻게 제한 할 수 있습니까?

 var uright = ui.position.left + 960; /* 960 is map height*/ 
    var pright = parentPos.left + 700; /* 500 is container height*/ 

     if (ui.position.top > parentPos.top) { 
    ui.position.top = parentPos.top; // works fine 
     } 
     if (ui.position.left > parentPos.left) { 
    ui.position.left= parentPos.left; // works fine 
     } 
    if (uright > pright) { 
     uright = pright; // that doesnt work 
     } 

여기 jsfiddle

Answer 1

당신은 getBoundingClientRect 방법을 사용하는 대신 position method.The Element.getBoundingClientRect를 사용하여 시도 할 수 있습니다() 메소드는 텍스트 사각형의 그룹을 둘러싸는 텍스트 사각형 객체를 반환 내입니다.

rectObject = object.getBoundingClientRect(); 

반환 값 즉, CSS 경계 박스 요소와 연관된 요소에 대한 getClientRects 의해 반환 직사각형()의 조합 인 TextRectangle 객체이다.

반환 값은 픽셀의 테두리 상자를 설명하는 읽기 전용 왼쪽, 위쪽, 오른쪽 및 아래쪽 속성을 포함하는 TextRectangle 개체입니다. 위쪽 및 왼쪽은 뷰포트의 왼쪽 위를 기준으로합니다.

그런 다음 요소의 top,left,right,bottom 값을 얻을 수 있습니다 즉 rectObject.right,rectObject.top,rectObject.bottom,

참조 : https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

는 다른 방법으로, 당신은 왜 드래그 할 JQuery와의 containment 옵션을 시도하지 않습니다. 링크 : http://api.jqueryui.com/draggable/#option-containment