ここでは、ドラッグ アンド ドロップ機能に関する igTree™ コントロールのプロパティに関するリファレンス情報を紹介します。プロパティはアルファベット順に紹介します。
以下の表では、igTree のドラッグ アンド ドロップ機能のプロパティについて説明するとともに、デフォルト値と推奨値を紹介します。
| プロパティ | タイプ | 説明 | デフォルト値 |
|---|---|---|---|
| allowDrop | Boolean | コントロールが別のコントロールからドロップを受け付けるかどうかを指定します。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 | false |
| containment | Boolean/Selector/Element/String/Array | true に設定すると、ヘルパーを収容するその内部領域はドラッグの最中にスクロールできます。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 | false |
| copyAfterMarkup | String | “後にコピーする” 上のヒント マークアップ。このヒントは、コピーしたノードを、現在ハイライトしているノード (マウス ポインターを合わせたノード) の後にドロップしようとすると表示されます。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
{0} の後へコピー |
| copyBeforeMarkup | String | “前にコピーする” 上のヒント マークアップ。このヒントは、コピーしたノードを、現在ハイライトしているノード (マウス ポインターを合わせたノード) の前にドロップしようとすると表示されます。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
{0} の前へコピー |
| copyBetweenMarkup | String | “間にコピーする” 上のヒント マークアップ。このヒントは、コピーしたノードを、現在ハイライトしている隣り合った 2 つのノード (両者の間にマウス ポインターを合わせたノード) の間にドロップしようとすると表示されます。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
{0} および {1} の間へコピー |
| copyToMarkup | String | “コピー先” 上のヒント マークアップ。このヒントは、コピーしたノードを、現在ハイライトしているノード (マウス ポインターを合わせたノード) の上にドラッグしようとすると表示されます。この場合、移動したノードはターゲット (ハイライト表示) ノードの子ノードになります。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
{0} へコピー |
| customDropValidation | Function | カスタム ドロップ検証のエントリ ポイントを提供します。カスタム検証には、ブール返り値が必要です。false が返るとドロップ ポイントが無効になります。 カスタム ドロップ検証関数は、内部ツリー検証機能がオーバーライドします。したがって、ドラッグ アンド ドロップ アクションを無効にできる位置はドロップ ポイントだけです。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 | null |
| dragAndDrop | Boolean | ドラッグ アンド ドロップ関数を有効/無効にする | false |
| dragAndDropSettings | Object | ドラッグ アンド ドロップ機能を設定する複雑なオプション | none |
| dragAndDropMode | String | ドラッグ アンド ドロップ モードを指定します。 有効な設定は以下のとおりです。 いずれも、個々のドラッグ アンド ドロップ モードを設定します。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 | default |
| dragOpacity | Float | ドラッグしたノードの不透明度/透明度のレベルとドラッグ中のヒント有効値の範囲は 0 から 1 です。1 でヒントは完全に不透明になり、0 で完全に透明になります。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 | 0.75 |
| dragStartDelay | Number |
mousedown イベントから、ドラッグが実行されるまでの待ち時間 (単位ミリ秒)これは、要素をクリックするときに不必要なドラッグが発生するのを防ぐためのオプションです。
このプロパティは、DragAndDropSettings プロパティ内で設定します。
|
200 |
| expandDelay | Number |
mousedown イベントの後、ドラッグでマウス ポインターを合わせてからノードが展開するまでの待ち時間 (ミリ秒)
このプロパティは、DragAndDropSettings プロパティ内で設定します。
|
1000 |
| helper | String |
ドラッグの表示にヘルパー要素の使用を可能にします。
有効な設定は以下のとおりです。
<function> では、DOM 要素を返す関数を記述します。
default 設定では、内部的に定義した関数をヘルパー要素が使用します。
このプロパティは、DragAndDropSettings プロパティ内で設定します。
|
default |
| invalidMoveToMarkup | String | ドロップ場所が正しくない場合のヒント マークアップ。このヒントは、移動したノードを、間違った場所にドロップしようとすると表示されます。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
|
| moveAfterMarkup | String | “後に移動する” 上のヒント マークアップ。このヒントは、移動したノードを、現在ハイライトしているノード (マウス ポインターを合わせたノード) の後にドロップしようとすると表示されます。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
{0} の後へ移動 |
| moveBeforeMarkup | String | “前に移動する” 上のヒント マークアップ。このヒントは、移動したノードを現在ハイライトしているノード (マウス ポイターを合わせたノード) の前にドロップしようとすると表示されます。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
{0} の前へ移動 |
| moveBetweenMarkup | String | “間に移動する” 上のヒント マークアップ。このヒントは、移動したノードを、現在ハイライトしている隣り合った 2 つのノード (両者の間にマウス ポインターを合わせたノード) の間にドロップしようとすると表示されます。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
{0} および {1} の間へ移動 |
| moveToMarkup | String | “移動先” 上のヒント マークアップ。このヒントは、移動したノードを現在ハイライトしているノード (マウス ポインターを合わせたノード) の上にドラッグしようとすると表示されます。 この場合、移動したノードはターゲット (ハイライト表示) ノードの子ノードになります。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 |
{0} へ移動 |
| revert | Boolean | true に設定すると、ドラッグしたノードはドラッグの停止時に元の位置に戻ります。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 | true |
| revertDuration | Number | 取り消しアニメーションの時間 (ミリ秒)。 このプロパティを 0 に設定するとアニメーションが無効になります。 revert プロパティを false に設定すると、revertDuration 設定を無視します。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 | 500 |
| zIndex | Number | 要素をドラッグ中のヘルパーの z-index。 z-index は、要素のスタックの順序を指定します。スタック インデックスが大きい要素の位置はスタックが下位の要素の前になります。 このプロパティは、DragAndDropSettings プロパティ内で設定します。 | 10 |
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
ドラッグ アンド ドロップの概要 (igTree): このトピックは、igTree コントロールのドラッグ アンド ドロップ機能の概要を提供します。
ドラッグ アンド ドロップ イベント リファレンス (igTree): ここでは、ドラッグ アンド ドロップ機能に関する igTree コントロールのイベントに関するリファレンス情報を紹介します。
API リンク (igTree): ここでは、igTree jQuery と MVC API までのリンクを紹介します。
このトピックについては、以下のサンプルも参照してください。
ドラッグ アンド ドロップ - 単一のツリー: このサンプルでは、igTree コントロールのドラッグ アンド ドロップ機能を有効にして初期化する方法を紹介します。
ドラッグ アンド ドロップ - 複数のツリー: このサンプルでは、2 つの igTree の間にノードをドラッグ アンド ドロップする方法を紹介します。
API およびイベント: このサンプルは igTree API を使用する方法を紹介します。
オンラインで表示: GitHub