1

DOM を操作するには、jQuery の代わりに角度バインディングを使用すると非常に便利ですが、jQuery を使用せずにドラッグ イベントを処理する方法がわかりません。

たとえば、2 番目のボックスを最初にドラッグしたり、ng-repeat li をドラッグして順序を変更したりします

angularにはドラッグイベントまたはディレクティブがありますか?

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

1 に答える 1

3

あなたはこれを達成することができます

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...
    }
};
于 2013-05-31T16:26:31.983 に答える