y 좌표는 고려하지 않아도 되므로 위 두 함수가 앞전 글보다 훨씬 간단해졌습니다.
하지만 이렇게 두 함수를 작성하면 드래그 된 bar 는 레이어 범위를 벗어나도 계속 드래그가 됩니다.
그러니까 posX 의 값을 판단해서 레이어 범위를 벗어나면 그 값을 적당한 값으로 바꿔줘야 합니다.
레이어 범위를 벗어나는 posX 의 값은 100 보다 작거나 혹은 300 보다 클때입니다.
100 은 레이어가 시작하는 x 좌표이고 300 은 레이어 시작점 100 에 레이어 가로크기 200 을 더해준값이죠.
가로크기가 207 이지만 그림 위치가 200 일때 레이어 맨 뒤에 그림이 위치하므로
레이어 가로크기는 200 으로 간주해도 됩니다.
답이 나왔으니 해결은 간단하죠.
if(posX < 0) posX = 0;
if(posX > 300) posX = 300;
그리고 나서 posX 를 그림의 x 위치로 정해주면 되는거죠.
이 두 줄을 함수에 추가하면 드래그 하다가 레이어 범위를 벗어나면 드래그 되지 않습니다.
한가지 더 추가 기능을 만들어봅시다.
레이어 옆에 input 태그로 텍스트를 하나 넣어줍니다.
그리고 이 텍스트에 그림이 레이어상의 상대적인 위치를 써줍시다.
가령 그림이 레이어의 가장 왼쪽에 왔으면 0 을 써주고 레이어의 가장 오른쪽에 왔으면 200 을 써주면 되죠.
이 써줄 값은 posX 에서 100 을 빼준 값이면 됩니다.
텍스트에 써줄 것이므로 추가 되는 텍스트 역시 식별자를 적어주면 편할겁니다.
또,
레이어 옆에 텍스트가 추가 될 것이므로 style 로서 위치를 잡아주면 보기도 좋겠지요.
추천 : 