본문 바로가기
프로그래밍/jQuery

Draggable, 드래그 기본사용, 이벤트 제어, 움직임 제한

by zoo10 2012. 7. 10.

Draggable

원문 링크 http://jqueryui.com/demos/draggable/

필요한 모듈 ( Dependencies )

  • UI Core
  • UI Widget
  • UI Mouse

 

 

기본 사용법 source view
개요 : 드래그 함수 기본

드래그 하세요.

 

드래그 이벤트 보기 source view
드래그 함수 이벤트 작동 방식 보기

드래그 하면 이벤트 발생 횟수를 볼 수 있습니다.

  • "start" invoked 0x
  • "drag" invoked 0x
  • "stop" invoked 0x

 

드래그 제약 조건 걸기 source view
특정영역 안에서만 움직이거나 움직임의 방향을 제어할 수 있음

좌우, 상하 이동 제어

위 아래 이동만 가능

좌 우로만 이동 가능

부모 창 내에서만 이동 가능하도록 제어

부모 박스 안에서만 이동 가능

제약없이 이동 가능

부모 박스 안에서만 이동 가능