如何使用angularjs拖放列表

Question

我正在尝试对来自数据库的列表进行重新排序，如下所示。我正在调用一个 api，它为我提供了所需的数据，并通过 angularjs 控制器将其绑定到 html 页面。

    <ul ui-sortable class="sortable list">
        <li ng-repeat="y in stagelist">{{y.stageName}}
            <span style="float:right;margin-right:10px;">
                <a href="#" ng-click="deletestage(y.id)"><img src="~/Images/delete.png" /></a> &emsp;
                <img src="~/Images/sortarrow.png" />
            </span>
        </li>
    </ul>

在我的控制器中，我有：

    Method.getbyId("stages", _job.JobId).then(function (list) {
        $scope.stagelist = list.data;}).catch(function (data) {
        console.log("access not allowed");
    });

我无法向上或向下移动任何列表项。请帮忙。我已经在nuget和bower包中包含了Angular.Ui.Sortable。

最后，我实际上想对列表重新排序，并在单击按钮时将其发送回服务器，它应该更新列表的顺序。

Answer 1

我使用这个网站 https://www.webucator.com/blog/2016/10/drag-drop-sortable-angularjs-angular-ui-sortable/使用拖放模型来工作。然后我使用所需的模型使用 ui.item.sortable.droptargetModel 来完成我的工作。