Resizing 클래스의 주요 기능은 아래와 같습니다.
1. size(width와 height)를 조정할 수 있습니다.
2. resizing은 두 가지 형태로 실행할 수 있습니다.
- 드래그할 때마다 size를 변경합니다.
- 드래그를 마쳤을 때 size를 변경합니다.
3. e, w, s, n, se, sw, ne, nw 방향으로 드래그할 수 있습니다.
- se, sw, ne, nw는 양방향으로 size가 조정됩니다.
| Options | Component |
|---|---|
| autoRatio {Boolean} | dragdrop.Resizing |
|
조정 비율 반영 여부. default: false
true: east와 south, west와 north를 하나의 묶음으로 하여 한 쪽 사이드를 변경하면
관계된 사이드도 동시에 변경됩니다.
east 바를 움직이면 width가 변경되지만, 이때 south에 해당하는 height도
width를 변경한 비율을 적용하여 자동으로 변경합니다.
|
|
| ccode {String} | dragdrop.Resizing |
|
component code : 'resizing'
|
|
| directDrag {Boolean} | dragdrop.Resizing |
|
핸들 바를 drag할 때 마다 target 엘리먼트의 이동 여부. default: false
false : 이동하지 않고 mouseup이 발생했을 때 이동
true: 드래그와 동시에 이동합니다.
|
|
| dragBar {Boolean} | dragdrop.Resizing |
|
drag bar 표시 여부. default: false
true: 표시합니다. false: 표시하지 않습니다.
|
|
| handles {String} | dragdrop.Resizing |
|
리사이징 핸들 방향. default 'e,s,se'
e: east, w: west, s: south, n: north,
se: southeast, ne: northeast, sw: southwest, nw: northwest, all: all
지정한 방향으로만 리사이징을 할 수 있습니다.
|
|
| handlesText {Hash} | dragdrop.Resizing |
|
handles text
e: east, w: west, s: south, n: north,
se: southeast, ne: northeast, sw: southwest, nw: northwest
|
|
| height {Number} | dragdrop.Resizing |
|
리사이징 대상 엘리먼트의 height. default: 50
|
|
| maxHeight {Number} | dragdrop.Resizing |
|
리사이징 최대 height. default: 5000
|
|
| maxWidth {Number} | dragdrop.Resizing |
|
리사이징 최대 width. default: 5000
|
|
| minHeight {Number} | dragdrop.Resizing |
|
리사이징 최소 height. default: 10
|
|
| minWidth {Number} | dragdrop.Resizing |
|
리사이징 최소 width. default: 20
|
|
| mouseOver {Boolean} | dragdrop.Resizing |
|
mouseover가 발생했을 때 드래그 바 표시 여부. default: false
dragBar가 true인 경우에만 지정할 수 있습니다.
false: 항상 표시합니다.
true: mouseover가 발생하면 드래그 바를 표시합니다.
|
|
| needWrap {Boolean} | dragdrop.Resizing |
|
wrapper 엘리먼트 생성 여부. default: false
true: wrapper 엘리먼트 생성
target 엘리먼트의 tagName이 button, img, input, select, textarea이면
이를 드래그 할 수 없으므로 자동으로 wrapper 역할을 하는 wrapper element를 생성하지만
이외에도 true로 지정하면 wrapper element를 생성합니다.
|
|
| prefix {String} | dragdrop.Resizing |
|
id 접두사. default: 'mc_resizing_'
|
|
| proxyClass {String} | dragdrop.ResizingProxy |
|
resizing proxy에 적용할 className
|
|
| proxyParent {HTMLElement/String} | dragdrop.ResizingProxy |
|
proxy 엘리먼트가 첨부될 parent element
지정하지 않으면 <body> 엘리먼트에 첨부합니다.
|
|
| resizable {Boolean} | dragdrop.Resizing |
|
리사이징 가능 여부. default: true
true: 리사이징을 할 수 있습니다.
false: 리사이징을 하지 못합니다.
|
|
| target {HTMLElement} | dragdrop.Resizing |
|
리사이징 대상 엘리먼트.
|
|
| targetClass {String} | dragdrop.Resizing |
|
타깃 엘리먼트에 설정할 className
|
|
| targetStyle {Hash} | dragdrop.Resizing |
|
타깃 엘리먼트에 설정할 style
|
|
| useRange {Boolean} | dragdrop.ResizingProxy |
|
range proxy에 이벤트 설정 여부. default: true
true: range proxy에 mousemove, mouseup 이벤트를 설정합니다.
false: range proxy에 이벤트를 설정하지 않습니다.
|
|
| width {Number} | dragdrop.Resizing |
|
리사이징 대상 엘리먼트의 width. default: 100
|
|
| Method | Component |
|---|---|
mc.dragdrop.Resizing
(Hash)
|
dragdrop.Resizing |
|
생성자
|
|
mainResizing
(HTMLElement/String)
|
dragdrop.Resizing |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
isResizing
(): Boolean
|
dragdrop.Resizing |
|
resizing중이면 true를 아니면 false를 반환합니다.
|
|
mainResizingProxy
(HTMLElement/String)
|
dragdrop.ResizingProxy |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
mouseMoveEvent
(Object, HTMLElement, Hash)
|
dragdrop.ResizingProxy |
|
mousemove 이벤트가 발생했을 때 실행하며 오버라이드용 메소드입니다.
|
|
removeEvents
()
|
dragdrop.ResizingProxy |
|
rangeProxy에 설정한 mousemove, mouseup 이벤트를 제거합니다.
|
|
setAutoRatio
(Boolean)
|
dragdrop.Resizing |
|
autoRatio 실행 여부를 설정합니다.
|
|
setEvents
()
|
dragdrop.ResizingProxy |
|
rangeProxy에 mousemove, mouseup 이벤트를 설정합니다.
|
|
| Custom Event | Component |
|---|---|
| autoRatio (Boolean ar, HTMLElement tg, Object this) | dragdrop.Resizing |
|
autoRatio를 변경했을 때 fire됩니다.
|
|
| resizeEnd (EventObject e, HTMLElement tg, Hash opts, Object this) | dragdrop.Resizing |
|
드래그를 완료완 후 mouseup을 했을 때 fire됩니다.
|
|
| resizeMove (EventObject e, HTMLElement tg, Hash opts, Object this) | dragdrop.Resizing |
|
리사이징 중일 때 mouse를 move할 때마다 fire됩니다.
|
|
| resizeStart (EventObject e, HTMLElement tg, Hash opts, Object this) | dragdrop.Resizing |
|
리사이징을 시작할 때 fire됩니다.
|
|
| setHandles (String handle, HTMLElement target, Object this) | dragdrop.Resizing |
|
handle 설정을 완료했을 때 fire됩니다.
|
|
| Examples | |
|---|---|
| resizing | |
|
resizing
|
|
| autoRatio | |
|
비율 자동 반영
|
|
| directResizing | |
|
실시간으로 resizing
|
|
| minmax | |
|
resizing 최소/최대 범위 지정
|
|