CookBook

imuiTreeでドラッグ&ドロップのバリデーションを実装する方法

投稿日:

このCookBookでは、imuiTree (ツリービュー) のドラッグ&ドロップバリデーションについて紹介しています。

intra-mart Accel Platform では、画面上にツリーを表示するUI部品でimuiTreeを用意しています。
imuiTree
この部品を使用すると、ツリー形式の表示はもちろんですが、dnd プラグインを設定することで、ドラッグ&ドロップ操作による各アイテムの移動ができるようになります。

完成イメージ


1. root1フォルダをドラッグ&ドロップします。
⇒ root2フォルダの後や、root2フォルダの中に移動することができます。
⇒ root3フォルダの中には移動できません。
 
2. root3フォルダをドラッグ&ドロップします。
⇒ どこにも移動できません。
 
3. child1-1ファイルをドラッグ&ドロップします。
⇒ root2フォルダの中に移動することができます。
⇒ root3フォルダの中には移動できません。
 
4. child3-1ファイルをドラッグ&ドロップします。
⇒ どこにも移動できません。

image

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

e builder プロジェクト : im_cookbook_113622.zip
imm ファイル : im_cookbook_113622-1.0.0.imm

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/113622/index
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. imuiTreeタグをページ上に配置してください。
  2. バリデーションを行うコールバック関数を追加してください。
  3. コールバック関数内に、バリデーションルールを実装してください。

1. imuiTreeタグをページ上に配置してください。

このとき、parameterのpluginsに、"dnd" と "crrm" を追加してください。
プラグインを追加することで、ドラッグ&ドロップ操作が可能になります。

index.js:

index.html:

2. バリデーションを行うコールバック関数を追加してください。

imuiTreeはjsTreeライブラリを使用しています。
jsTreeライブラリのAPIを呼び出して、バリデーションを行うためのコールバック関数を設定に追加してください。

3. コールバック関数内に、バリデーションルールを実装してください。

コールバック関数内にバリデーションルールを実装ください。
true を返却するとドラッグ操作可能、false を返却すると不可となります。

引数の data には、ドラッグ操作を行っているアイテムや、ドロップ先のアイテムなどの情報が格納されています。
実際に格納される内容は、jsTreeのAPIドキュメントを参照してください。
https://old.jstree.com/documentation/crrm
https://old.jstree.com/documentation/core.html#_get_move

このCookbookでは、以下のルールに従ってバリデーションを実装しています。
1. 禁止マークがある root3 フォルダと配下のファイルは、常にドラッグ不可
2. フォルダはトップ階層と、フォルダ配下にのみドラッグ可能
3. ファイルはフォルダ配下にのみドラッグ可能 (トップ階層は不可)
4. 禁止マークがある root3 配下にはドラッグ不可

以上で、imuiTreeのアイテムをドラッグ&ドロップする際のバリデーションを実装することができました。

-CookBook
-

執筆者:


comment

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

関連記事

特定フローの特定ノードで、処理中の案件に対し、任意の処理対象者を追加する方法

このCookBookでは、LogicDesignerを利用して、特定フローの特定ノードで、処理中の案件に対し、任意の処理対象者を追加する方法について紹介しています。 人事異動で担当者が追加となり、複数 …

スプレッドシートでシートの保護を利用して、ノード毎に入力セルを制御する

このCookBookでは、スプレッドシートでシートの保護を利用して、ノード毎に入力セルを制御する方法について紹介しています。 Excelでは、シートの保護を利用して、特定のセルのみ入力できるように制御 …

no image

intra-martを初めて使う開発者が、まずは e Builder で「Hello world!」する方法

e Builder は、intra-mart Accel Platform で動作するアプリケーションを開発するための開発支援ツールです。 このレッスンでは、intra-martを初めて使う開発者が …

申請者の役職から処理対象者を設定する

このCookbookでは、IM-Workflow 2018 Springから新たに追加された 処理対象者プラグイン「ロジックフロー(ユーザ)」 の設定方法を紹介いたします。 この機能を利用すると、申請 …

no image

デバッグサーバ起動時に出力されるコンソールの情報をファイル出力する方法

このCookBookでは、e Builder でデバッグサーバの利用時にコンソールに出力された内容を、別途指定したファイルに出力する方法について紹介しています。 完成イメージ 1. 指定したファイルに …

RSSRSSRSSRSS