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/directives';
// 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/directives';
// 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イベントがトリガーされます。実際の移動が発生しないようにするには、IDragStartEventArgs.cancel プロパティを true に設定してイベントをキャンセルできます。

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

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

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

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>

Drag the dialog using the handle in the following demo.

使用方法

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

You can apply transition animation to the igxDrag at any time, but it is advised to use it when dragging ends or the element is not currently dragged. This can be achieved by using the transitionToOrigin and the transitionTo methods.

The transitionToOrigin method, as the name suggests, animates the currently dragged element or its ghost to the start position, where the dragging began. The transitionTo method animates the element to a specific location relative to the page (i.e. pageX and pageY) or to the position of a specified element. If the element is not being currently dragged, it will animate anyway or create ghost and animate it to the desired position.

Both functions have arguments that you can set to customize the transition animation and set duration, timing function or delay. If specific start location is set it will animate the element starting from there.

When the transition animation ends, if a ghost is created, it will be removed and the igxDrag directive will return to its initial state. If no ghost is created, it will keep its position. In both cases, then the transitioned event will be triggered, depending on how long the animation lasts. If no animation is applied, it will be triggered instantly.

You can have other types of animations that involve element transformations. That can be done like any other element either using the Angular Animations or straight CSS Animations to either the base igxDrag element or its ghost. If you want to apply them to the ghost, you would need to define a custom ghost and apply animations to its element.

Reorder items in the list using the drag handle. While dragging a list item other list items will re-order with animation.

アニメーション

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

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

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

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

The igxDrop directive can be applied to any DOM element just like the igxDrag directive.

By default, the igxDrop directive doesn’t apply any logic for modifying the dragged element position in the DOM. That’s why you need to specify a dropStrategy or apply custom logic. Drop strategies are discussed in the next section.

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

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

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

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

• Prepend - always inserts the dropped element as first child and is implemented as a class named IgxPrependDropStrategy.

• Insert - inserts the dragged element at last position. If there is a child under the element when it was dropped though, the igxDrag instanced element will be inserted at that child’s position and the other children will be shifted. It is implemented as a class named IgxInsertDropStrategy.

The way a strategy can be applied is by setting the dropStrategy input to one of the listed classes above. The value provided has to be a type and not an instance, since the igxDrop needs to create and manage the instance itself.

public appendStrategy = IgxAppendDropStrategy;

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

ドロップ ストラテジ

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

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

public appendStrategy = IgxAppendDropStrategy;

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

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

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

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

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

例:

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

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

The user could reorder the cards in each column. It is done by setting each card also a drop area, so we can detect when another card has entered its area and switch them around at runtime, to provide better user experience.

It won’t be Kanban board without also the ability to switch cards between columns. A card can be directly moved from one column to another column at a specific position. It is achieved here with a dummy object, so it would create a visual area where the card will be position if released. The dummy object is removed once the dragging of a card ends or exits another column.

Drag items around the kanban board.

例

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

高度な設定

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

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

API

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

リファレンス

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

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