jQuery UI 라이브러리를 사용해 화면에 있는 이미지가 이동하는 모습을 실시간으로 확인할 수 있습니다. 이미지가 이동하며 특정 영역에 도착하면 감지하는 간단한 예제 소스 코드를 작성해 보았습니다.
소스의 간략한 설명을 하자면 jQuery는 최신 버전으로 첨부하였으며 jQuery UI를 이용하기 위해 jQuery UI script를 추가로 첨부하였습니다. jQuery UI에서 제공하는 draggable 기능을 이용해 이미지를 실시간으로 이동할 수 있으며 droppable 기능의 drop 옵션을 사용해 특정 영역에 이미지가 들어왔는지 확인할 수 있습니다. 그리고 droppable의 out 옵션을 사용해 이미지가 특정 영역을 벗어났는지 감지할 수 있습니다.
See the Pen Untitled by zzarungna (@zzarungna) on CodePen.
jQuery UI draggable의 간단한 사용 방법이 필요하셨던 분들은 코드를 복사해서 활용하시면 좋을 것 같습니다. jQuery UI draggable 사용 방법에 대한 설명은 많았지만, 이미지를 재밌게 만들면 재밌을 것 같다는 생각에 글을 정리해 보았습니다.