[jQuery]margin 영역 제외 오른쪽으로 붙이기

 

이동 버튼을 클릭하면 대상을 테두리 영역으로 붙일 경우

테두리 영역 $("#parent1")의 끝지점은 border와 margin 값을 제외한 기본영역 + padding 이다,

따라서 innerWidth()로 테두리 영역의 끝 지점을 알 수 있다.

하지만 이 지점으로 가게 되면 대상 영역이 밖으로 나가기 때문에

대상영역의 width 값만큼 빼줘야 한다. 현재 대상영역은 border 영역까지 안으로 들어와야 하기때문에

$one.outerWidth() 값만큼 빼준다.

그러나 이렇게만 했을 경우에는 

이렇게 의도와 다른 결과가 나오는데 이유는 지역좌표를 사용할 경우

margin값 까지 포함된 위치를 기준으로 이동하기 때문이다.

따라서 안에 보더 영역까지 빼줄 생각이였지만 margin영역을 기준으로 이동하기 때문에 

여기서 오른쪽 margin 영역을 더 빼줘야 원하는 결과를 얻을 수 있다.

 

See the Pen width() by sel (@sellttu) on CodePen.