Angular Drag and Drop (ドラッグアンドドロップ) ディレクティブの概要

Ignite UI for Angular Drag and Drop ディレクティブは、ページの要素のドラッグを有効にします。サポートされている機能には自由自在のドラッグ、ドラッグ ハンドルの使用、ゴーストのドラッグ、アニメーション、および複数のドロップ ストラテジが含まれています。

Angular Drag and Drop の例

アイコンをドラッグ アンド ドロップして位置を変更します。

Ignite UI for Angular Drag and Drop コンポーネントを使用した作業の開始

Ignite UI for Angular Drag & Drop ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxDragDropModule をインポートします。

// app.module.ts

...
import { IgxDragDropModule } from 'igniteui-angular';
// import { IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxDragDropModule],
    ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxDragDirective と IgxDropDirective をスタンドアロンの依存関係としてインポートすることも、IGX_DRAG_DROP_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_DRAG_DROP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_DRAG_DROP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <div igxDrag>Drag me</div>
    <div igxDrop>Drop here</div>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_DRAG_DROP_DIRECTIVES]
    /* or imports: [IgxDragDirective, IgxDropDirective] */
})
export class HomeComponent {}

Ignite UI for Angular Drag and Drop モジュールまたはディレクティブをインポートしたので、igxDrag と igxDrop ディレクティブの使用を開始できます。

Angular Drag ディレクティブの使用

Angular アプリケーション内の要素をある場所から他の場所へドラッグするには、igxDrag ディレクティブを使用します。igxDrop ディレクティブと組み合わせてドラッグした要素の配置やインタラクティブなアプリケーションを作成できます。

ドラッグの基本

ユーザーが 5px いずれかの方向へスワイプするとドラッグ操作を開始します。これはカスタマイズ可能であり、dragTolerance 入力を使用して変更できます。そうでない場合は、インタラクションがクリックとして見なされ、dragClick イベントがトリガーします。

ドラッグが開始されると、dragStartイベントがトリガーされます。実際の移動が発生しないようにするには、cancel プロパティを true に設定してイベントをキャンセルできます。

移動が実行される前に、ポインターの最後と次の位置を含む dragMove イベントもトリガーされます。要素のドラッグ時に動きが検出されるたびにトリガーされます。

ユーザーがマウス/タッチをリリースした後、ドラッグ ゴースト要素が DOM から削除され、dragEnd が発生されます。

Note

dragMove イベントの性質上、短い期間で何度もトリガーされる可能性があり、トリガーされたときに実行される複雑な操作のパフォーマンスの問題が発生することがあります。

ゴーストでドラッグします

igxDrag ディレクティブは、テンプレートに追加して DOM 要素に適用できます。

<div igxDrag>Drag me</div>

igxDrag ディレクティブのデフォルト動作では、ベース要素を変更せずに残し、エンドユーザーがドラッグ操作を実行した場合ゴースト要素を作成します。

ページにゴーストがレンダリングされる前に、追加しようとしているゴースト要素の情報を含む ghostCreate イベントがトリガーされます。このイベントは、dragStart イベントの直後にトリガーされます。dragStart がキャンセルされた場合、ゴーストは作成されず、それに応じて ghostCreate イベントはトリガーされません。

ゴーストが削除される直前に、ゴーストの ghostDestroy イベントがトリガーされます。

ゴーストのカスタマイズ

デフォルトのゴースト要素は、igxDrag が使用されるベース要素のコピーです。ghostTemplate 入力へのテンプレート参照を直接提供することでカスタマイズできます。

<div class="email-content flexlist"
	igxDrag
	[ghostTemplate]="customGhost">
	<div class="sender">
		{{email.sender}} 
	</div>
	<div class="email-title">
		{{email.title}}
	</div>
</div>
<ng-template #customGhost>
	<div class="dragGhost">
		<igx-icon fontSet="material">email</igx-icon> 
		Moving {{ draggedElements }} item{{ (draggedElements > 1 ? 's' : '')}}
	</div>
</ng-template>

ゴーストなしのドラッグ

igxDrag ディレクティブが適用されるベース要素を移動したい場合、ghost 入力を false に設定することができます。それにより、余分なゴースト要素はレンダリングされず、要素をドラッグするときにカスタム スタイル設定を適用する必要がある場合は、ベース要素に直接適用できます。

<div igxDrag [ghost]="false">Drag me</div>

ハンドルを使用したドラッグ

デフォルトで、要素全体がそのアクションの実行に使用されるため、ドラッグする igxDrag の子である要素を指定できます。igxDragHandle ディレクティブを使用して実行し、igxDrag内の複数の要素に適用できます。

使用方法

<div
    igxDrag 
    [ghost]="false"
    [dragTolerance]="0"
    (dragMove)=onDragMove($event)>
    <igx-icon igxDragHandle fontSet="material" class="dialogHandle">drag_indicator</igx-icon>
    <div class="igx-dialog__window">
    </div>
</div>

以下のデモでは、ハンドルを使用してダイアログをドラッグします。

アニメーション

要素がドラッグされている場合、デフォルトでニメーションは適用されません。

igxDrag にトランジション アニメーションを適用できますが、ドラッグの終了時または要素が現在ドラッグされていないときの使用をお勧めします。これは、transitionToOrigin および transitionTo メソッドを使用して実現できます。

transitionToOrigin メソッドは、その名前が示すように、現在ドラッグされている要素または要素のゴーストを、ドラッグが開始された開始位置へアニメーション化します。transitionTo メソッドは、ページ (pageX および pageY など) に関連する特定の位置に要素をアニメーション化します。または、指定された要素の位置をアニメーション化します。要素が現在ドラッグされていない場合は、アニメーション化するか、ゴーストを作成して目的の位置にアニメーション化します。

両方の関数には、トランジション アニメーションをカスタマイズし、期間、タイミング関数、または遅延を設定するために設定できる引数があります。特定の開始位置が設定されている場合、そこから要素をアニメーション化します。

トランジション アニメーションが終了すると、ゴーストが作成される場合、ゴーストは削除され、igxDrag ディレクティブは初期状態に戻ります。ゴーストが作成されていない場合、位置を維持します。いずれの場合もアニメーションの持続時間に基づいて、transitioned イベントがトリガーされます。アニメーションが適用されていない場合、ただちにトリガーされます。

要素の変換を処理する他のアニメーションを作成できます。これは、Angular Animations または CSS Animations を使用して、ベース igxDrag 要素/そのゴーストのいずれかに他の要素と同様に実行できます。ゴーストに適用する場合は、カスタムゴ ーストを定義し、その要素にアニメーションを適用する必要があります。

ドラッグ ハンドルを使用してリスト内の要素をソートします。リスト要素のドラッグ時は、他のリスト要素がアニメーションでソートされます。

ドラッグ可能な要素を無視する

ユーザーが igxDrag をインスタンス化したメイン要素の操作可能な子を使用したい場合は、igxDragIgnore ディレクティブを設定することにより、igxDrag からは無視され、ドラッグ アクションを実行しないようにすることができます。これにより、これらの要素は完全に操作可能になり、すべてのマウス イベントを受信します。

<div [igxDrag]="myData">
    <span>Drag me!</span>
    <igx-icon igxDragIgnore fontSet="material" (click)="remove()">bin</igx-icon>
</div>

Angular Drop ディレクティブの使用

igxDrag ディレクティブを使用してドラッグされている要素を領域に配置する場合、igxDrop を使用します。要素が適用される要素の境界に入ったかどうか、その後要素内でリリースされているかを決定するために使用できるイベントを提供します。

igxDrop ディレクティブは、igxDrag ディレクティブと同じように、任意の DOM 要素に適用できます。

デフォルトで、igxDrop ディレクティブは DOM のドラッグされた要素の位置を変更するためのロジックを適用しません。そのため、dropStrategy を指定するか、カスタム ロジックを適用する必要があります。ドロップ ストラテジについては、次のセクションで説明します。

ドロップ ストラテジ

igxDrop には、Default、Prepend、Insert および Append の 4 つのドロップ ストラテジがあります。

• Default - 要素が igxDrop 要素にドロップされた場合にアクションを実行せず、IgxDefaultDropStrategy という名前のクラスとして実装されます。

• Append - ドロップされた要素を常に最後の子として挿入し、IgxAppendDropStrategy という名前のクラスとして実装されます。

• Prepend - ドロップされた要素を常に最初の子として挿入し、IgxPrependDropStrategy という名前のクラスとして実装されます。

• Insert - ドロップされた要素を最後の位置に挿入します。ただし、要素がドロップされたときに要素の下に子がある場合、igxDrag インスタンス化された要素はその子の位置に挿入され、他の子は移動されます。IgxInsertDropStrategy という名前のクラスとして実装されます。

ストラテジを適用する方法は、上記のクラスのいずれかに dropStrategy 入力を設定することです。igxDrop はインスタンス自体を作成および管理する必要があるため、提供される値はインスタンスではなくタイプでなければなりません。

public appendStrategy = IgxAppendDropStrategy;

<div igxDrop [dropStrategy]="appendStrategy"></div>

ドロップ ストラテジのキャンセル

特定のドロップ ストラテジを使用する場合、cancel プロパティを true に設定して dropped イベントでその動作をキャンセルできます。Dropped イベントは igxDrop に固有です。igxDrop にドロップ ストラテジを適用していない場合、イベントをキャンセルしても副作用はありません。

例:

<div igxDrag></div>
<!-- ... -->
<div igxDrop (dropped)="onDropped($event)"></div>

public onDropped(event) {
    event.cancel = true;
}

独自のドロップ ロジックを実装する場合は、dropped イベントにバインドし、そこでロジックを実行するか、IgxDefaultDropStrategy クラスの拡張をお勧めします。

ドラッグとドロップ要素のリンク

それぞれ igxDrag および igxDrop ディレクティブで dragChannel および dropChannel 入力を使用すると、異なる要素をリンクして相互間にのみ操作できます。たとえば、特定の igxDrop 要素にドロップできるように igxDrag 要素を制約する必要があり、使用できない場合は、同じチャネルを割り当てることで簡単に実現できます。

例

<div igxDrag [dragChannel]="['Mammals', 'Land']"> Human </div>
<div igxDrag [dragChannel]="['Mammals', 'Water']"> Dolphin </div>
<div igxDrag [dragChannel]="['Insects', 'Air']"> Butterfly </div>
<div igxDrag [dragChannel]="['Insects', 'Land']"> Ant </div>

<div igxDrop [dropChannel]="['Mammals']"> Mammals </div>
<div igxDrop [dropChannel]="['Insects']"> Insects </div>
<div igxDrop [dropChannel]="['Land']"> Land </div>

右側のメールを左側のフォルダーにドラッグします。

高度な設定

igxDrag と igxDrop 両方を組み合わせて多くのさまざまな複雑なアプリケーションシ ナリオで使用できるため、次の例はかんばんボードでそれらの使用方法を示します。

ユーザーは各列のカードをソートすることができます。各カードにドロップ領域を設定することで実行されるため、別のカードがその領域に入ったことを検出し、実行時にそれらを切り替えて、ユーザーにより快適なエクスペリエンスを提供します。

列間でカードを切り替える機能はなければ、かんばんボードにはなりません。カードは、列から別の列に特定の位置で直接移動できます。以下ではダミー オブジェクトを使用して実現されているため、リリースされた場合にカードが配置される視覚的な領域が作成されます。カードのドラッグが終了するか、別の列を出るとダミーオブジェクトが削除されます。

かんばんボード内で項目を移動します。

API

• IgxDragDirective
• IgxDropDirective
• IgxDefaultDropStrategy
• IgxAppendDropStrategy
• IgxPrependDropStrategy
• IgxInsertDropStrategy

リファレンス

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)