Implement Drag and Drop, vertical sorting on rows

Viewed 458

I have an HTML code which looks like this. I want to apply DRAG and DROP functionality on these rows (table-data).

<table>
   <tr class="table-header">
      <th>Title</th>
      <th>Name</th>
      <th>Modified By</th>
      <th>Date</th> 
   </tr>
   <tr class="table-data" ng-repeat="item in items">
      <td>item.title</td>
      <td>item.name</td>
      <td>item.modifiedByName</td>
      <td>item.modifiedDate</td>
   </tr>
</table>

In my ANGULAR JS controller my ITEMS array is of the below format

$scope.items = [
        {
           title: "string"
           name: "string"
           modifiedByName: "string"
           modifiedDate: "string"
           defaultOrder: 1
        },
        {
           title: "string"
           name: "string"
           modifiedByName: "string"
           modifiedDate: "string"
           defaultOrder: 2
        },
        {
           title: "string"
           name: "string"
           modifiedByName: "string"
           modifiedDate: "string"
           defaultOrder: 3
        },
        {
           title: "string"
           name: "string"
           modifiedByName: "string"
           modifiedDate: "string"
           defaultOrder: 4
        }
]

Angular JS Version - 1.5.8

  • Need to display rows as per 'defaultOrder' parameter.
  • Once the user updates his/her preference using drag and drop the default order should get updated and then sent to the server accordingly.
1 Answers
Related