实现拖放，对行进行垂直排序

Question

我有一个 HTML 代码，看起来像这样。我想在这些行 (table-data) 上应用 DRAG 和 DROP 功能。

<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>

在我的 ANGULAR JS 控制器中，我的 ITEMS 数组格式如下

$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 版本 - 1.5.8

需要根据 'defaultOrder' 参数显示行。
一旦用户使用拖放更新 his/her 首选项，默认顺序应该得到更新，然后相应地发送到服务器。

Answer 1

AngularJS Team提供了指令（库）来实现上述功能

下面是githublink.

https://github.com/angular-ui/ui-sortable

实现拖放，对行进行垂直排序

Implement Drag and Drop, vertical sorting on rows

javascript

html

angularjs

bootstrap-4

angularjs-directive