igGridでドラッグ＆ドロップ操作によって行の並べ替えを行う

igGridではドラッグ＆ドロップ操作によって行の入れ替えを行うAPIは実装されていないのですが、jQueryのSortable機能を使用して同等の動作を実現することができます。

以下のようにigGridのrowsRenderedイベントでigGridのtbody要素に対してSortableを初期化し、stopイベントでigGridのデータソースに対して行の入れ替えを行います。

$("#grid1").igGrid({
.....
	rowsRendered: function(evt, ui) { 
		//igGridのtbody要素に対してSortableを設定する
		$( "#grid1 tbody" ).sortable({
			containment: "parent",
			start: function(evt, ui) {
				var children = ui.item.children();
				$("#grid1_headers thead th").each(function(ix, el) {
					//td要素の幅をヘッダーの幅と同じになるよう設定する 
					$(children[ix]).width($(el).width());
				});
			},
			stop: function(evt, ui){
				var ds = $("#grid1").data('igGrid').dataSource,
					rowId = parseInt(ui.item.attr('data-id')), 
					newDs = $.extend([], ds.settings.dataSource), 
					record = $.extend({}, ds.findRecordByKey(rowId)),
					scrollPos = $("#grid1_scroll").scrollTop(),
					recordIndex;
									
				recordIndex = ds.settings.dataSource.map(function(e){
					return e.ProductID
				}).indexOf(rowId);
				
				//移動した行を削除する
				newDs.splice(recordIndex, 1);
				recordIndex = $("#grid1").igGrid('allRows').index($('tr[data-id = "' + rowId + '"]'));
				//移動した行を追加し直す
				newDs.splice(recordIndex, 0, record);
				//igGridのdataSourceを置き換える
				$("#grid1").igGrid('option', 'dataSource', newDs);
				//スクロール位置を元に戻す
				$("#grid1_scroll").scrollTop(scrollPos);
			}
		});
	}
});