SBGRID

			var datagrid;	
			var SBGridProperties = {};
			var SBGridProperties2 = {};
			var temp_data =[];

			function createGrid(){
				var SBGridProperties = {};			
				SBGridProperties.parentid = 'SBGridArea';
				SBGridProperties.id = 'datagrid';
				SBGridProperties.backcoloralternate = '#f4f4f4';
				SBGridProperties.jsonref = 'groupData';
				SBGridProperties.rowheight = 25;
				SBGridProperties.emptyrecords = '조회된 자료가 존재하지 않습니다.';//레코드가 없을경우 출력되는 메시지
				SBGridProperties.explorerbar = 'move';
				SBGridProperties.waitingui = true;
				SBGridProperties.extendlastcol = 'scroll';
				
				SBGridProperties.columns = [
					{caption : ['수입/지출구분'],		ref : 'impExpSeNm',		width : 120,	type : 'output',	style : 'text-align:center'},
					{caption : ['표준/연구회구분'],   ref : 'insnSeNm',	   width : 120,	   type : 'output',	   style : 'text-align:center'},
					{caption : ['관항목세목구분'],	   ref : 'lowcdnm',		   width : 120,    type : 'output',    style : 'text-align:center'},
					{caption : ['코드'],			   ref : 'code',		   width : 100,    type : 'output',    hidden:true},
					{caption : ['코드명'],			  ref : 'codeName',		  width : 500,    type : 'output'},
					{caption : ['lowcd'],			ref : 'lowcd',			width : 100,	type : 'output',	hidden:true},
					{caption : ['topcd'],			ref : 'topcd',			width : 100,	type : 'output',	hidden:true},
					{caption : ['lowgb'],			ref : 'lowgb',			width : 100,	type : 'output',	hidden:true},
					{caption : ['insnSe'],			ref : 'insnSe',			width : 100,	type : 'output',	hidden:true},
					{caption : ['impExpSe'],		ref : 'impExpSe',		width : 100,	type : 'output',	hidden:true},
					{caption : ['lv'],				ref : 'lv',				width : 100,	type : 'output',	hidden:true},
					{caption : ['lvCodeName'],		ref : 'lvCodeName',		width : 100,	type : 'output',	hidden:true},
					{caption : ['codepathgb'],		ref : 'codepathgb',		width : 100,	type : 'output',	hidden:true},
					{caption : ['codepathgbnm'],	ref : 'codepathgbnm',	width : 100,	type : 'output',	hidden:true},
					{caption : ['cdName'],			ref : 'cdName',			width : 100,	type : 'output',	hidden:true}
				];
				
				datagrid = _SBGrid.create(SBGridProperties);


				SBGridProperties2.parentid = 'SBGridArea2';
				SBGridProperties2.id = 'datagrid2';
				SBGridProperties2.backcoloralternate = '#f4f4f4';
				SBGridProperties2.jsonref = 'temp_data';
				SBGridProperties2.rowheight = 25;
				SBGridProperties2.emptyrecords = '조회된 자료가 존재하지 않습니다.';//레코드가 없을경우 출력되는 메시지
				SBGridProperties2.explorerbar = 'move';
				SBGridProperties2.waitingui = true;
				SBGridProperties2.extendlastcol = 'scroll';
				
				SBGridProperties2.columns = [
					{caption : ['수입/지출구분'],		ref : 'impExpSeNm',		width : 120,	type : 'output',	style : 'text-align:center'},
					{caption : ['표준/연구회구분'],   ref : 'insnSeNm',	   width : 120,	   type : 'output',	   style : 'text-align:center'},
					{caption : ['관항목세목구분'],	   ref : 'lowcdnm',		   width : 120,    type : 'output',    style : 'text-align:center'},
					{caption : ['코드'],			   ref : 'code',		   width : 100,    type : 'output',    hidden:true},
					{caption : ['코드명'],			  ref : 'codeName',		  width : 500,    type : 'output'},
					{caption : ['lowcd'],			ref : 'lowcd',			width : 100,	type : 'output',	hidden:true},
					{caption : ['topcd'],			ref : 'topcd',			width : 100,	type : 'output',	hidden:true},
					{caption : ['lowgb'],			ref : 'lowgb',			width : 100,	type : 'output',	hidden:true},
					{caption : ['insnSe'],			ref : 'insnSe',			width : 100,	type : 'output',	hidden:true},
					{caption : ['impExpSe'],		ref : 'impExpSe',		width : 100,	type : 'output',	hidden:true},
					{caption : ['lv'],				ref : 'lv',				width : 100,	type : 'output',	hidden:true},
					{caption : ['lvCodeName'],		ref : 'lvCodeName',		width : 100,	type : 'output',	hidden:true},
					{caption : ['codepathgb'],		ref : 'codepathgb',		width : 100,	type : 'output',	hidden:true},
					{caption : ['codepathgbnm'],	ref : 'codepathgbnm',	width : 100,	type : 'output',	hidden:true},
					{caption : ['cdName'],			ref : 'cdName',			width : 100,	type : 'output',	hidden:true}
				];
				
				datagrid2 = _SBGrid.create(SBGridProperties2);

				datagrid.setDnD({target : 'datagrid2', type : 'move', position : 'insert', stylesync : false});
				datagrid2.setDnD({target : 'datagrid', type : 'move', position : 'insert', stylesync : false});

				datagrid.bind('startdnd','gridStartDnd'); 
				datagrid2.bind('startdnd','gridStartDnd'); 
				datagrid.bind('beforednd','gridBeforeDnd'); 
				datagrid2.bind('beforednd','gridBeforeDnd'); 
				datagrid.bind('afterdnd','gridAfterDnd'); 
				datagrid2.bind('afterdnd','gridAfterDnd'); 
			};
			
			function gridStartDnd(){
				$('#tValue').text("drag 일어날 때 이벤트 발생");
			}

			function gridBeforeDnd(){
				alert("drop 이전 이벤트 발생");
			}

			function gridAfterDnd(){
				alert("drop 이후 이벤트 발생");
				$('#tValue').text('');
			}