출처 : PHPSCHOOL
2개 이상의 영역에 대해서 드래그앤 드랍시 오류 수정, 리사이즈, 펼침 기능 추가 등 변화가 좀 많다면 많을 수도 있습니다. ^^;;
아래는 전체 내용에 대한 간략한 소개 입니다. 소스 및 예제는 링크된 페이지에서 확인 하실 수 있습니다.
/**
* xwzGadgetry : Javascript UI Library for the gadget(or the widget) <http://www.x-wiz.com/>
* 레이어의 위치 지정 또는 순서 출력을 사용자가 원하는 위치 또는 순서로 배열하도록 하는 함수.
* 쇼핑몰에서 상품 위치나, 디자인관리에서 디자인 레이어 위치 이동에 따른 배열,
* 여러 통계 수치나, 입력폼과 출력폼이 동일한 화면에서 출력 순서 변경을 위해 만듦
*
* Idea of "drag&drop swap" is from "google ig<http://www.google.co.kr/ig/>" - see dragDepart()
* Idea of "toggle swap" is from "yahoo.com<http://kr.yahoo.com/>"- see prevToggle()
* Idea of "the distance" is from "daum.net<http://www.daum.net/>" - see _swapAviate()
* Idea of "bindAsObject, bindAsEvent" is from "Prototype JavaScript Framework <http://www.prototypejs.org/>"
*
*@copyright x-wiz.com
*@license The LGPL License
*@author N.Thu Lee
*@version 1.0 Alpha
*@release 2006.11.07
*@updated 2007.05.28
*@changelog
*2006.11.22
*- 레이아웃 이동 간격 수식 변경(다음.넷 참조)
*
*2006.12.04
*- 드래그앤드랍 기능 추가
*
*2007.05.02
*- xwzGadgetry로 라이브러리 명칭 확정
*- 이벤트 핸들러 추가 및 해제 함수를 라이브러리 외부 함수로 분리
*- 2개 이상의 라이브러리 대상 객체에 대해서 드래그앤드랍시 레이어 위치 문제 수정
*- bindAsObject, bindAsEvent 외부 함수 추가
*
*2007.05.05
*- expand 기능 추가. 가젯의 document 영역에 대한 최소화, 최대화 기능 추가
*
*2007.05.28
*-resize 기능 추가
*
*+-------------------------------------+
*plan
*+-------------------------------------+
* - 레이어의 각 셀영역이 고정 그리드인 것을 틀에 제한없이 사용 가능하도록 추가
* - 2개 이상의 영역에 가젯이 이동가능하도록 추가
* - 각 특성별 분리 작업 -모듈화(?). drag & drop, toggle swapping, resize, ...
* - 여전히 알고리즘이나 소스에 대한 최적화 필요 쩝....
*
*@example
*-( new xwzGadgetry(프레임 객체 ID, [[Toggle Tag Name],[Columns : 가로 갯수],[Margin : 간격]]) ).load();
*
*+-------------------------------------+
*method
*+-------------------------------------+
*-loadSequel() : 가젯 위치값을 쿠키 정보에서 가져오는 함수
*-saveSequel() : 가제 위치를 쿠키로 저장한 후 onArrival 함수를 호출
*-onArrival(function object) : 가젯 위치 변경되어 완료되었을 때 호출하는 사용자용 함수
*-getIndex(object[or int, string]) : 고유 인덱스를 통해서 해당 가젯의 배열에서 위치를 찾는 함수
*-searchGadget(object[or int, string]) : 인덱스 또는 객체값, ID, Name을 통해서 가젯 인스턴스를 찾음
*-columns(int, bool) : 가젯의 가로 갯수 설정 또는 그 값 반환 함수 (Bool:값 설정 시 가젯이 위치를 찾아갈 때 효과 없이 이동할 것인지 여부)
*-strata(int) : 가젯이 해당 위치를 찾아 갈 때, _swapAviate 함수를 몇번 호출할 것인지 설정 또는 반환(가젯 위치 이동 속도에 관여함)
*-opacity(int) : 가젯이 이동할 때 투명도 설정 및 값 반환 함수(0~100)
*-motion(Bool) : 가젯 이동 시 이동 효과 없이 바로 적용할 지 설정/반환 함수
*-reset(Bool) : 가젯 위치 초기화 전역 함수
*-compose() : 각 가젯 배열 인덱스에 따른 위치를 초기화 하는 함수
*dragDepart(event object, target int) : 마우스다운 이벤트가 발생하였을 때 drag&drop 이벤트 발생
*-resetToggle(object, bool) : 위치 초기화 (Object:이벤트 발생 객체, Bool:모션 효과 여부)
*-prevToggle(object 이벤트 발생 객체,int[or object, string]) : 클릭 이벤트 발생 대상 가젯이 이전 순서로 이동하는 버튼(이미지) 설정
*-nextToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 다음 순서로 이동
*-firstToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 처음 순서로 이동
*-lastToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 마지막 순서로 이동
*-upToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 위로 이동
*-downToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 아래로 이동
*-leftToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 왼쪽으로 이동
*-rightToggle(source object, target int[or object string]) : 클릭 이벤트 발생 시 대상 가젯이 오른쪽으로 이동
*-expose(target int[or object string]) : 가젯 expand 명령 수행
*-expandAttrib(target int[or object], name string, value string [or function,string], function bind object) : expand 옵션 변경 함수.
* name [strata,min,max,animate], 함수 호출 bind object 생략 가능
*
*+-------------------------------------+
* memberof variable
*+-------------------------------------+
*-AvailableCookie : 쿠키 유지일
*-noResize : 리사이즈 변경 가능 여부 확인
*-borderColor : 영역 clone 객체 테두리 색상
*-grip : 리사이즈 grip 객체 속성 설정(color:색상,size:크기,minWidth:너비최소제한,minHeight:높이최소제한,maxWidth:너비최대제한,maxHeight:높이최대제한)
* grip={color:'red',size:8,minWidth:null,minHeight:null,maxWidth:null,maxHeight:null};
*
*3.Toggle List (Toggle TagName으로 지정된 Tag로 감싸 주어야 함.<span toggle="명령 옵션 지정"
*-reset:초기화
*-up, down, left, right:위, 아래, 왼쪽, 오른쪽으로 이동
*-first, last:처음, 끝으로 이동
*-next, prev:다음, 이전 순서로 이동
*-drag: 드래그 앤 드랍 영역
*-expand: document 영역에 대한
*-gadget: expand, resize 영역
*
*+-------------------------------------+
*expand option (<span toggle="expand" attr:옵션="값" ...>
*+-------------------------------------+
*- gadget toggle이 반드시 존재하여야 함.
*-'attr:strata' : Int 속도
*-'attr:state' : [max, min] 상태값
*-'attr:min' : 최소화되었을 때 실행할 함수 또는 JS code
*-'attr:max' : 최대화되었을 때 실행할 함수 또는 JS code
*-'attr:animate' : [Blind, Slide, [None or null]] : 각 상태값 변경 시 효과
*
*+-------------------------------------+
*onArrival return value
*+-------------------------------------+
*-index: 순서 값
*-top: style.top
*-left: style.left
*-width: style.width
*-height: style.height
*-expanded: expand 속성[Bool]
*/
출처 : http://cafe.naver.com/pspboolp.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=293
SSISO Community