如何重新排列angularjs中的列

Question

这是我的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>

这是我正在重复的数组

      $scope.jsondata.fieldsNameList = [{ "enableFiltering": false, "enableSorting": false, "fieldId": "56adc5276e65744a03ed0c00", "fieldName": "fnamev2", "fieldType": "field" }, { "enableFiltering": false, "enableSorting": false, "fieldId": "56adc5276e65744a03ed0d21", "fieldName": "fnamev1", "fieldType": "field" }];

我想通过向左和向右拖动来重新排列表的列，如何执行此操作，并且是使用angularjs或javascript的任何方式