GridDrag 클래스의 주요 기능은 아래와 같습니다. 1. mc.dragdrop.DragGroup 클래스와 연동하여 Grid의 field를 drag할 수 있습니다. 2. 좌우로 drag할 때 이동하게 될 위치를 포인터로 제공합니다.
| Options | Component |
|---|---|
| adjustY {Number} | dragdrop.DragProxy |
|
타킷으로부터 드래그 proxy의 Y축 거리
|
|
| autoCollect {Hash} | dragdrop.DragGroup |
|
mousedown 이벤트 발생 노드 자동 생성. default: false
groupNode를 지정하고 autoCollect를 true로 지정하면
geoupNode의 child 노드들을 자동으로 추출하여 mousedown 이벤트가 발생할 노드로 설정합니다.
수동으로 처리하려면 eventNodes options에 지정합니다.
이에 대해서는 아래의 @groupNode와 eventNodes 지정 방법을 참조하세요
|
|
| ccode {String} | dragdrop.DragGroup |
|
component code : 'draggroup'
|
|
| clone {Boolean} | dragdrop.DragDrop |
|
차일드 엘리먼트 사용 여부. default: false
true: child 엘리먼트 사용. false: 사용하지 않음
dragProxy를 사용할 때 dragTaget 엘리먼트의 차일드 엘리먼트를
임시로 clone하여 사용합니다.
따라서 드래그할 때 차일드 엘리먼트가 표시됩니다.
|
|
| cursorMove {Boolean} | dragdrop.DragDrop |
|
move 형태의 cursor 표시 여부. default:true
true: move 형태의 cursor 표시
false: 표시하지 않음
|
|
| directDrag {Boolean} | dragdrop.DragDrop |
|
drag할 때 마다 target 엘리먼트의 이동 여부. default:false
false: 이동하지 않고 mouseup이 발생했을 때 이동
true: 드래그와 동시에 엘리먼트 이동
|
|
| draggable {Boolean} | dragdrop.DragDrop |
|
drag/drop 가능 여부. default: true
false: 드래그 불가
|
|
| dragProxy {HTMLElement|String} | dragdrop.DragProxy |
|
(optional) 드래그할 proxy 엘리먼트.
지정하지 않으면 시스템에서 자동으로 설정합니다.
|
|
| dragProxyClass {String} | dragdrop.DragProxy |
|
proxy 엘리먼트에 적용할 className
default: 'mc-drag-proxy'
|
|
| dragTarget {HTMLElement} | dragdrop.DragDrop |
|
드래그 대상 엘리먼트
|
|
| dragTargetClass {String} | dragdrop.DragDrop |
|
드래그 target 엘리먼트에 설정할 className
|
|
| dragTargetStyle {Hash} | dragdrop.DragDrop |
|
드래그 target 엘리먼트에 설정할 style
|
|
| eventNodes {Array} | dragdrop.DragGroup |
dragdrop 대상 노드.
- groupNode와 eventNodes 지정 방법
eventNodes에 mousedown 이벤트가 발생할 노드를 지정하고 groupNode에 parent node를 지정합니다.
아래와 같이 다수의 차일드 노드에서 이벤트가 발생할 수 있을 때
groupNode에 'topNode'를 지정하고 <td>#id를 eventNodes에 배열로 지정합니다.
<div id='topNode'>
<table><tbody><tr>
<td id='foo'>foo<div id='foo-1'></div></td>
<td id='bar'>bar<div id='bar-1'></div></td>
</tr></tbody></table>
</div>
dragTarget 노드에서만 이벤트가 발생하는 경우 groupNode와 eventNodes를 지정하지 않을 수 있으며
시스템이 자동으로 설정합니다.
|
|
| groupNode {HTMLElement|String} | dragdrop.DragGroup |
|
mousedown 이벤트가 발생하는 parent node
|
|
| handleNode {HTMLElement|String} | dragdrop.DragDrop |
(optional) 드래그할 엘리먼트
드래그 대상 엘리먼트는 크게 세 가지로 구분할 수 있습니다.
dragTarget: 드래그 대상 엘리먼트
드래그를 함에 따라 이동하게될 child 엘리먼트를 포함한 parent 엘리먼트를 나타냅니다.
handleNode: 드래그를 행하는 노드
dragTarget이 <div><div><input="text" />sports</div></div>로 구성되어 있을 때
<input>은 드래그를 할 수 없으므로 <div>sports</div>로 드래그를 하게 됩니다.
이때 <div>sports</div>가 handleNode가 되며 이를 움직이면 dragTarget 전체가 이동하게 됩니다.
handleNode를 지정하지 않으면 dragTarget이 hadleNode 역할을 수행하게 됩니다.
dragProxy: dragTarget 대신에 드래그를 실행할 노드
dragProxy를 사용해서 드래그를 하면 dragProxy만 움직이고 dragTarget은 움직이지 않습니다.
dragProxy에서 mouseup 이벤트가 발생하면 그때 dragTarget을 dragProxy 위치로 이동하게 됩니다.
이때 dragProxy가 handleNode 역할을 수행합니다.
|
|
| limitAxis {String} | dragdrop.DragDrop |
|
드래그 제한 축. default; null
x: x축으로 이동 가능, y: y축으로만 이동 가능
|
|
| limitNode {HTMLElement|String} | dragdrop.DragDrop |
|
드래그 제한 노드.
드래그를 지정한 엘리먼트 범위내에서만 가능합니다.
#id를 지정하면 #id 엘리먼트내에서만 이동할 수 있습니다.
|
|
| pointerClass {String} | grid.GridDrag |
|
pointer 엘리먼트에 설정한 className. default: 'mc-grid-pointer'
|
|
| prefix {String} | grid.GridDrag |
|
id 접두사. default: 'mc_griddrag_'
|
|
| showFirstChild {Boolean} | dragdrop.DragProxy |
|
드래그할 때 dragTarget 차일드 표시 여부. default: false
엘리먼트를 드래그할 때 내용은 표시되지 않고 박스만 표시됩니다.
이때 showFirstChild에 true를 지정하면 dragTarget 엘리먼트의 첫 번째 엘리먼트를 표시하므로
일부분이지만 컨텐츠를 볼 수 있습니다.
|
|
| tipClass {String} | grid.GridDrag |
|
드래그를 할 때 DragProxy 클래스의 showFirstChild(디폴트: true)를 false로 지정하지 않으면
드래그하는 엘리먼트 명칭을 Tip 형태로 제공합니다.
tipClass가 Tip 형태로 제공하는 엘리먼트에 설정됩니다.
|
|
| Method | Component |
|---|---|
mc.grid.GridDrag
(Hash)
|
grid.GridDrag |
|
생성자
|
|
mainGridDrag
()
|
grid.GridDrag |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
addEventNodes
(HTMLElement/String)
|
dragdrop.DragGroup |
|
지정한 노드를 this.eventNodes에 추가합니다.
|
|
applyAutoCollect
()
|
dragdrop.DragGroup |
|
this.autoCollect에 true를 지정하면 groupNode에 속한 child node를 전부 추출하여 이벤트 발생 노드로
설정합니다.
|
|
getDragTarget
(): HTMLElment
|
dragdrop.DragDrop |
|
드래그 노드를 반환합니다.
|
|
isDragging
(): Boolean
|
dragdrop.DragDrop |
|
드래그 중 여부를 반환합니다.
|
|
mainDragDrop
(HTMLElement/String)
|
dragdrop.DragDrop |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
mainDragGroup
(HTMLElement/String)
|
dragdrop.DragGroup |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
mainDragProxy
(HTMLElement/String)
|
dragdrop.DragProxy |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
mouseDownEvent
(EventObject, HTMLElement, Hash)
|
dragdrop.DragDrop |
|
mousedown 이벤트가 발생했을 때 실행 됩니다.
|
|
mouseMoveEvent
(EventObject, HTMLElement, Hash)
|
dragdrop.DragDrop |
|
mousemove 이벤트가 발생했을 때 실행 됩니다.
|
|
mouseUpEvent
(EventObject, HTMLElement, Hash)
|
dragdrop.DragDrop |
|
mouseup 이벤트가 발생했을 때 실행 됩니다.
|
|
resetXY
()
|
dragdrop.DragDrop |
|
드래그하기 전의 처음 위치로 돌아 갑니다.
|
|
setCursorMove
(HTMLElement)
|
dragdrop.DragProxy |
|
cursor를 move 형태로 설정합니다.
|
|
setDraggable
(Boolean)
|
dragdrop.DragDrop |
|
드래그 실행 여부를 설정합니다.
|
|
| Custom Event | Component |
|---|---|
| mousedown (EventObject e, HTMLElement tg, Hash opts, Object this) | dragdrop.DragDrop |
|
드래그 영역을 mousedown했을 때 fire됩니다.
|
|
| mousemove (EventObject e, HTMLElement tg, Hash opts, Object this) | dragdrop.DragDrop |
|
드래그 영역을 mousemove했을 때 fire됩니다.
|
|
| mouseup (Number dragX, Number dragY, HTMLElement el, Object this) | dragdrop.DragDrop |
|
드래그 영역에서 mouseup했을 때 fire됩니다.
|
|