====== 그리드 Drag Drop 가이드 ======
그리드의 Drag & 그리드의 Drag & Drop 기능을 이용한 예시 화면이다.
관련 속성으로 dragable, accept_drop이 있다.
관련 API로 getdragable, setdragable가 있다.
관련 이벤트로 on_begindrag, on_dropcomplete가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/GRID/grid_drag_drop
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_drag_drop.xml|grid_drag_drop.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/GRID/grid_drag_drop.js|grid_drag_drop.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/GRID/grid_drag_drop|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
/**
* 드래그 시작 이벤트를 처리한다.
* @param objInst 이벤트가 발생한 컴포넌트 인스턴스
* @param nDragRow 드래드한 행 인덱스
* @param nDragColumn 드래드한 열 인덱스
* @returns 1 드래그를 허용한다.
0 드래그를 허용하지 않는다.
*/
function grdDrag_on_begindrag(objInst, nDragRow, nDragColumn)
{
// 드래그를 허용하고 싶지 않은 경우에는 아래 예시 소스와 같이 0을 리턴한다.
if (nDragRow == 0) {
return 0; // 드래그 불가
}
return 1; // 드래그 허용
}
/**
* 드랍 이벤트를 처리한다.
* @param objInst 이벤트가 발생한 컴포넌트 인스턴스
* @param src_screeninst 드롭된 컴포넌트가 포함된 화면 인스턴스
* @param nDragColumn 드롭된 컴포넌트 오브젝트 인스턴스
*/
function grdDropEvent_on_dropcomplete(objInst, src_screeninst, src_objinst)
{
var nDropRow, nDropText;
// 드랍된 컴포넌트 유형이 그리드 인지 검사.
if (src_objinst.getcontrolkind() != XFD_CTRLKIND_GRID) {
return;
}
// 드랍된 그리드의 선택된 행의 특정 컬럼 값을 구함
nDropText = src_objinst.getitemtext(src_objinst.getselectrow(), 2);
factory.consoleprint("nDropText = [" + nDropText + "]");
// 드롭된 행의 인덱스를 구함. 데이터가 없는 곳에 드롭된 경우, -1 값이 리턴된다.
nDropRow = this.grdDrop.getdrophilightrow();
factory.consoleprint("getdrophilightrow = " + nDropRow);
// insertitemtext API 는 nDropRow 파라미터가 -1인 경우, 맨 마지막에 행이 추가된다.
this.grdDrop.insertitemtext(nDropRow, 0, nDropText);
}