Ui Grid is the popular grid system specially for Angular 1.x(Currently ui-grid doesn’t support angular 2 and above version). Ui-grid has no dependency rather than angular which makes it light weight. It has very rich feature set such as sorting, filtering, grouping and pagination and also has server side support for data-binding and pagination.

This article demonstrates that how can you rearrange rows by performing drag and drop within ui-grid with the help of ‘ui-grid-draggable-rows’ plugin.
Add reference of ‘ui-grid-draggable-rows’ plugin
First install ‘ui-grid-draggable-rows’ plugin, if you are using npm then run the command
npm install ui-grid-draggable-rows
and add the refrence of the ‘ui-grid-draggable-rows’ library:
<script src="/node-modules/ui-grid-draggable-rows/ui-grid-draggable-rows.js"> </script>
if you are using bower then run the command:
bower install ui-grid-draggable-rows
and add the refrence of the ‘ui-grid-draggable-rows’ library:
<script src="/bower-components/ui-grid-draggable-rows/ui-grid-draggable-rows.js"> </script>
You can also download directly from github.
Add dependency in your angular application
Adter adding refrence of the plugin add dependency in your angular application like this:
var app = angular.module("app", ["ui.grid", "ui.grid.draggable-rows"]);
How to use
To add drag and drop functionality you have to insert ‘ui-grid-draggable-rows’ directive to your table.
<div ng-controller="gridController"> <div ui-grid="gridOptions" class="grid" ui-grid-draggable-rows></div> </div>
Controller Code:
app.controller('gridController', ['$scope', gridController]); function gridController($scope) { $scope.gridOptions = { rowTemplate: '<div grid="grid" class="ui-grid-draggable-row" ' + 'draggable="true"><div ng-repeat="(colRenderIndex, col) in ' + 'colContainer.renderedColumns track by col.colDef.name" ' + 'class="ui-grid-cell" ' + 'ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader, \'custom\': true }" ' + 'ui-grid-cell></div></div>', data: [{ "AgentName": "John", "department": "Sales", "order": 1 }, { "AgentName": "David", "department": "Marketting", "order": 2 }, { "AgentName": "Smith", "department": "Sales", "order": 3 }, { "AgentName": "Jeremy", "department": "Sales", "order": 4 }] }; $scope.gridOptions.onRegisterApi = function(gridApi) { gridApi.draggableRows.on.rowDropped($scope, function(info, dropTarget) { console.log("Dropped", info); }); }; };
Update data after dropping row
You can update the scope data after dropping row. Suppose if we want to update the agent’s orders of the corresponding to dragged and target rows, you can use ‘rowDropped’ event which is the wrapper of the onDrop
html5 event. See in the below:
$scope.gridOptions.onRegisterApi = function(gridApi) { gridApi.draggableRows.on.rowDropped($scope, function(info, dropTarget) { var draggedEntity = info.draggedRowEntity, targetEntity = info.targetRowEntity, // info.fromIndex return zero based index value fromIndex = info.fromIndex, // info.toIndex return zero based index value toIndex = info.toIndex; draggedEntity.order = toIndex + 1; targetEntity.order = fromIndex + 1; }); };
Styling
You can control styling of drag and drop effect by using these avaialble css classes:
.ui-grid-draggable-row-target
css class for drag effect.
.ui-grid-draggable-row-over
css class will be added on the row where drag pointer hover.
.ui-grid-draggable-row-over--above
and .ui-grid-draggable-row-over--below
: css classes are used for showing target place for dropping row.