[해피CGI][cgimall] Draggable & Resizable Focus Box In jQuery - stageItem.js

다운로드 받은 파일의 압축을 해제한 후
index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다.

 

Wix.com 같은 웹사이트 빌더에서 자주 보이는
웹페이지 안의 특정 공간에 포커스가 생기면
해당 박스를 드래그를 이용해서 크기를 조절하거나, 위치를 조절해서 화면에 배치시키는
jquery + jquery ui 플러그인 입니다.



사용법은

1. jquery 와 jquery ui 를 로드해줍니다.

 

2. stageltem.js 를 로드해줍니다.

 

3. 드래그 및 리사이즈를 하고자 하는 DIV를 만들어주고, stageItem 을 실행시켜줍니다.

 

4. 드래그가 특정 범위 안에 속하게 한다거나,
리사이즈 핸들러의 색상을 조절하거나,
드래그 되는 박스끼리 중첩이 되는 속성을 여부는 아래와 같은 옵션으로 제어가 가능합니다.

 

5. 박스에 생기는 이벤트들의 콜백도 지원해줍니다.