skillup

技術ブログ

JavaScript UI

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

投稿日:

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

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

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

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

インストール

ソース

HTML

JS

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

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

参考リンク

https://github.com/angular-ui/ui-sortable (公式)
http://qiita.com/nogson/items/1769ec56f3c652a74dc5
http://dev.classmethod.jp/client-side/javascript/angularjs-ui-sortable-drag-and-drop/

-JavaScript, UI
-

執筆者:


comment

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

関連記事

no image

フォームとコントロール

今回はフォームについて Contents1 基本原則となる考え方1.1 寛容な入力形式1.2 構造化された入力形式1.3 穴埋め1.4 入力ヒント1.5 入力プロンプト1.6 オートコンプリート1.7 …

no image

dataTableによる無限スクロール

Angularで無限スクロールをやったので一般のjqueryで。 dataTablesというプラグインです。 以前下記リンクで紹介していますが、ようわかっとらんかったんで(汗)再度書きます。 ページャ …

no image

Seleniumの値基本動作まとめ

以前、「Seleniumでの画面テスト」というエントリーでのテストフレームワークとして、Seleniumを紹介しました。 上記のエントリーですが、単なるインストールと基本的な起動、簡単な文字入力ぐらい …

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …