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リンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

JavaScriptのトランスパイルについて

今回はJavaScriptのトランスパイルについて。 JavaSciprtではwebpackでコンパイルなどをする時に同時にトランスパイルという処理を行います。 トランスパイルとは? 主にES2015 …

no image

複数の非同期処理終了後(when&Promise.all)

JavaScriptで複数の非同期処理(例:API)を走らせて、その非同期処理が全て終わった後で、何らかの処理をしたい時について。 Contents1 when2 Promise_all when j …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …