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

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

특정영역 안에서만 움직이거나 움직임의 방향을 제어할 수 있음

좌우, 상하 이동 제어

위 아래 이동만 가능

좌 우로만 이동 가능

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

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

제약없이 이동 가능

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