angularjs - 角度 js 是否有拖动事件或拖动指令？

Question

使用角度绑定代替jQuery来操作DOM确实很有帮助，但是我不知道如何处理没有jQuery的拖动事件，

比如我想把第二个框拖到第一个，或者拖 ng-repeat li 来改变顺序

角度是否有拖动事件或指令？

<div>
<li>This is first box</li>
<li>This is second box</li>
</div>

//or like below 
<div><li ng-repeat="box in boxs | orderBy:'order'">{{box.name}}{{box.order}}</li></div>

Answer 1

你可以用

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

在您的文档中包含 sortable.js 文件。（注意对jquery和jqueryUI的额外依赖）

将可排序模块作为依赖项添加到您的应用程序模块

var myAppModule = angular.module('MyApp', ['ui.sortable'])

然后像这样改变你的标记：

<ul ui-sortable="sortableOptions" ng-model="boxs">
    <li ng-repeat="box in boxs | orderBy:'order'">
        {{box.name}}{{box.order}}
    </li>
</ul>

最后在控制器中为您的“可排序”添加一些配置。

$scope.sortableOptions = {
    update: function(e, ui) { 
        // do something when the sortorder has changed
        // e.g. save the new order to your backend...
    }
};