Angular Dragula: How to get a update sort list on save button after drag and drop

424 Views Asked by At

I am fetching list of posts with sort order from Database and binding with table using ng-repeat of rows. I set them up so you can reorder them with drag-and-drop using Angular Dragula. This works fine. After dragging, Whenever I click on save button I should get Updated Sort Order, So that I can update it on Database.

Before Drag:

Let Suppose post_sort_order:1,2,3,5

Before Drag

After Drag : After Drag

post_sort_order: 4,2,3,1

HTML:

  <tbody md-body  ui-sortable >

                        <tr md-row> 
                                <td>
                                    <div  dragula-model="vm.GroupData.groups" class="drag-container" dragula='"drag-container"'  layout="column" layout-xs="column" layout-align="space-between" layout-margin>
                                                <tri-widget ng-repeat="order in vm.GroupData.groups" flex title="{{::order.group_name | triTranslate}}"  title-position="top" palette-background="blue-grey:600" background="primary"></tri-widget>
                                     </div>
                                </td>
                         </tr>

                    </tbody>

Javascript: Result: vm.GroupsData.groups:

API Response

Now, Once I click on Save button, I should get updated sort list like here 4,3,2,1.

Actual post_sort_order: 1,2,3,5

Expected post_sort_order:3,1,5,2

Is there a way to get updated list ?If yes, Please let me know. Thanks in advance.

0

There are 0 best solutions below