테이블뷰 DragDrop 기능 가이드

이 화면은 테이블뷰 컴포넌트의 드래그&드랍 기능에 대한 샘플 화면이다.

컴포넌트 드랍 가능 여부는 테이블뷰 accept_drop 속성 및 테이블뷰 아이템의 accept_drop 속성을 통해서 허용 여부가 결정된다.

관련 속성으로 accept_drop이 있다.

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

템플릿 위치: /HTML5/COMPONENT/TABLEVIEW/tableview_dragdrop

템플릿 파일

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

// 테이블뷰 드랍 완료 이벤트
function tview_on_dropcomplete(objInst, nRow, nColumn, src_screeninst, src_objinst)
{
	// 컴포넌트 삭제 처리
	src_objinst.destroy();

	// 테이블뷰 아이템내 컴포넌트 새로 생성
	this.tview.createobjectex(nRow, nColumn, XFD_CTRLKIND_PUSHBUTTON, {
		"anchor": src_objinst.prop("anchor"),
		"x": src_objinst.getleft(),
		"y": src_objinst.gettop(),
		"width": src_objinst.getwidth(),
		"height": src_objinst.getheight(),
		"text": nRow + "행 " + nColumn + "열",
		"name": src_objinst.getname(),
		"dragable": 1,
		"on_click": "btn_dragdrop_on_click"
	});
}

// 버튼 클릭 이벤트
function btn_dragdrop_on_click(objInst)
{
	var tableview_pos;

	// 컴포넌트의 테이블 뷰 아이템 위치를 표시
	tableview_pos = objInst.gettableviewpos();
	screen.alert("버튼 위치 - 행: " + tableview_pos.row + ", 열: " + tableview_pos.column);
}