skillup

技術ブログ

JavaScript UI

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

投稿日:2017年3月16日 更新日:

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。

私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。

今回AngularJSでそのようなものを作っているんですが、明細の順番をドラック&ドロップで入れ替えられないかというリクエストがあり、こちらを調査することに。

結論からいうとjQueryのsortableというライブラリをangularJSでも使え、このライブラリを使うことで解決しました。

インストール

ソース

HTML

JS

これだけで基本はいけます。

なお移動時になにか動きを付けたいときは’start’:function(event,ui) {~などでトリガーを設定することができます。

参考リンク

https://github.com/angular-ui/ui-sortable (公式)
AngularJSで、リストをドラック&ドロップで入れ替える為のメモ
[AngularJS] UI.Sortable を使ったドラッグ&ドロップ UI の構築

-JavaScript, UI
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …

no image

JavaScriptでのDom操作に関して

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。 Contents1 ES6のクラス化2 DOM要素取得のポイント2.1 class自体でのスコー …

no image

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …