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

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

モジュールバンドラparcelについて

現在のフロントエンドだと、es6以降の書き方が主流になっていることもあり、一度慣れてしまうとなかなか戻れない便利さがあります。 私の場合、設定が面倒だったり、Chromeではトランスパイルしなくても動 …

no image

検索ページの遷移に関して

検索ページの遷移に関してメモ。 基礎だが実際全部完全に網羅できているかというと不安な部分が多い。 Contents1 基本仕様: 以下のようなページ構成を想定2 想定しないといけない遷移状態3 よくあ …

no image

JavaScriptモジュール化の歴史など

今の現場(2017年10月入場)ですが、比較的モダンな技術を使っておりまして、私の場合、特にJavaScriptにカルチャーショックを受けてしました。 現場に入る前はAngularJSなどは独学でやっ …

アーカイブ