Question

使用angular binding非常有用而不是jQuery来操作DOM，但我不知道如何在没有jQuery的情况下处理drag事件，

例如，我想将第二个框拖到第一个，或拖动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>

最后在控制器中为“sortable”添加一些配置。

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

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

1 个答案: