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

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

cakePHPのSSL設定+jQueryのError Loading Page

cakeで作ったアプリの認証画面でhttps環境だとError Loading Pageというエラーメッセージがでてしまい、ログインできないという事象が発生。 最初はSSLが原因かとおもっていたんです …

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …