jQuery UI를 활용한 Drag & Drop 예제

아래 예제는 jQuery UI를 활용한 Drag & Drop 예제이다.

화면에 4개의 그림이 한 줄로 표시된다. 각각의 그림은 food, city, sports, animals를 나타내는 가로/세로 100px인 임의의 이미지가 표시된다. 그림들 아래에는 4개의 빈 사각형이 표시되고 각각에는  food, city, sports, animals 라는 텍스트가 임의의 순서로(새로고침 할 때마다 위치가 바뀜) 표시된다.  이 프로그램은 위의 이미지 중 하나를 끌어다 아래의 사각형에 올려놓는데 이미지와 사각형 박스의 글자가 일치하면 이미지가 해당 사각형 박스로 이동하고, 다른 위치에 올려 놓으면 제자리로 돌아가는 예제이다.

jQuery UI는 jQuery를 기반으로 하여 확장된 사용자 인터페이스를 제공하는 라이브러리이다. 예를 들어 input 박스를 클릭(또는 포커스 이동)하면 달력이 표시되거나, 레이어 팝업을 한 줄의 명령줄 입력으로 실행한다거나 하는 등등의 일을 쉽고 간단하게 처리할 수 있도록 해준다.

자세한 내용은 http://jqueryui.com 사이트나 이 사이트에서 앞으로 진행될 강좌를 참조하시라.

여기서는 이 예제를 간단히 살펴보면서 jQuery UI의 가능성을 경험하길 바란다.

 

jQuery UI Drag & Drop 예제

Drag & Drop

Share the joy
  •  
  •  
  •  
  •  

댓글 남기기