그리드 Drag Drop 가이드

그리드의 Drag & 그리드의 Drag & Drop 기능을 이용한 예시 화면이다.

관련 속성으로 dragable, accept_drop이 있다.

관련 API로 getdragable, setdragable가 있다.

관련 이벤트로 on_begindrag, on_dropcomplete가 있다.

템플릿 위치: /HTML5/COMPONENT/GRID/grid_drag_drop

템플릿 파일

• grid_drag_drop.xml
• grid_drag_drop.js
• 새창으로 실행

/**
 * 드래그 시작 이벤트를 처리한다.
 * @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);
}