this is my html
<table class="table table-bordered table-responsive mar0 tablebg table-width">
<thead>
<tr>
<th ng-repeat="field in jsonData.fieldsNameList track by $index" class="field-name">
<span ng-click="onclicktableHeader(field)">{{field.fieldName}}</span>
<span class="check-align" ng-if="field.fieldType=='field'"><i ng-click="enableFilter(field)" tooltip="Enable Filtering" tooltip-append-to-body="true" tooltip-placement="up" ng-class="{'fa fa-check-square-o': !field.enableFiltering, 'fa fa-plus-circle': field.enableFiltering}"></i></span>
<span class="check-align" ng-if="field.fieldType=='field'"><i ng-click="enableSort(field)" tooltip="Enable Sorting" tooltip-append-to-body="true" tooltip-placement="up" ng-class="{'fa fa-check-square-o': !field.enableSorting, 'fa fa-plus-circle': field.enableSorting}"></i></span>
<i ng-click="deleteColumn(field)" class="fa fa-times"></i>
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
</tbody>
</table>
and this is my array which i am repeating
$scope.jsondata.fieldsNameList = [{ "enableFiltering": false, "enableSorting": false, "fieldId": "56adc5276e65744a03ed0c00", "fieldName": "fnamev2", "fieldType": "field" }, { "enableFiltering": false, "enableSorting": false, "fieldId": "56adc5276e65744a03ed0d21", "fieldName": "fnamev1", "fieldType": "field" }];
i want to reorder the columns of table by dragging it left and right, how to do this, and is their any way using angularjs or javascript