- Grid > Drag & Drop
우리말로 하면 끌어다놓기인데 참 설명하기 어렵죠. ^^
GUI가 도입된 이후 익숙한 방식이긴 하지만 웹에서 이런걸 구현한다는 것은 아직은 낯선 방법입니다.
일부 쇼핑몰에서는 이런 방식을 도입했다가 다시 이전으로 되돌리기도 했지만
업무용 애플리케이션의 경우에는 필요에 따라 적절히 배치하게 되면
업무의 효율을 극대화시킬 수 있습니다.
* 마우스 인터랙션에 너무 의존하게 되면 접근성에 문제가 생길 수 있습니다.
하위 호환성을 먼저 확보하는것이 더 중요하겠죠.
예제에서는 트리 형식을 사용하고 있네요.
앞에서 배운것처럼 그리드 에디터에서 displaytype을 tree 로 바꾸어줍니다.
그리도 바인딩 설정에서 treelevel과 treestate를 설정해줍니다.
드래그앤드롭에는 3가지 이벤트가 사용됩니다.
ondrag, ondragmove, ondrop
물론 좀 더 섬세한 제어가 가능하지만 기본적으로는 3가지 이벤트만으로 처리가 가능합니다.
ondrag는 드래그가 발생했을때 일어나는 이벤트입니다.
GridDragEventInfo 에 이벤트와 관련된 정보를 담게 됩니다.
기본적으로 해당 하는 cell, row, col에 대한 정보를 전달하고
병합이 되었을 경우에 해당하는 정보까지 담게 됩니다.
ondragmove는 이동중에 이벤트가 발생하게 됩니다.
역시 이벤트에 대한 정보는 GridDragEventInfo에 담게 됩니다.
그리고 마우스를 놓는 시점에서 드롭 이벤트가 발생하고 ondrop이 처리됩니다.
이후에 필요한 데이터를 처리해주면 됩니다.
* 드래그 이벤트까지는 어렵지 않은데 드롭 이후에 데이터를 바꾸는 부분이 사실 혼란스러운 부분이라..