---
title: Angular Drag and Drop | IgniteUI for Angular | インフラジスティックス | MITライセンス
description: Ignite UI for Angular Drag and Drop ディレクティブを使用してページの要素のドラッグ実行する方法を紹介します。
keywords: Angular Drag and Drop, Angular Drag and Drop ディレクティブ, Angular UI コントロール, Ignite UI for Angular, インフラジスティックス
license: MIT
_language: ja
---
# Angular Drag and Drop (ドラッグアンドドロップ) ディレクティブの概要
The Ignite UI for Angular Drag and Drop directives enable dragging of elements around the page. The supported features include free dragging, using a drag handle, drag ghost, animations and multiple drop strategies.
## Angular Drag and Drop の例
アイコンをドラッグ アンド ドロップして位置を変更します。
## Ignite UI for Angular Drag and Drop コンポーネントを使用した作業の開始
Ignite UI for Angular Drag & Drop ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
```cmd
ng add igniteui-angular
```
Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
次に、**app.module.ts** ファイルに `IgxDragDropModule` をインポートします。
```typescript
// app.module.ts
...
// import { IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxDragDropModule],
...
})
export class AppModule {}
```
あるいは、`16.0.0` 以降、`IgxDragDirective` と `IgxDropDirective` をスタンドアロンの依存関係としてインポートすることも、[`IGX_DRAG_DROP_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/directives/src/directives/drag-drop/public_api.ts) トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。
```typescript
// home.component.ts
// import { IGX_DRAG_DROP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
Drag me
Drop here
`,
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 アプリケーション内の要素をある場所から他の場所へドラッグするには、ディレクティブを使用します。ディレクティブと組み合わせてドラッグした要素の配置やインタラクティブなアプリケーションを作成できます。
### ドラッグの基本
ユーザーが 5px いずれかの方向へスワイプするとドラッグ操作を開始します。これはカスタマイズ可能であり、入力を使用して変更できます。そうでない場合は、インタラクションがクリックとして見なされ、`dragClick` イベントがトリガーします。
ドラッグが開始されると、イベントがトリガーされます。実際の移動が発生しないようにするには、プロパティを `true` に設定してイベントをキャンセルできます。
移動が実行される前に、ポインターの最後と次の位置を含む イベントもトリガーされます。要素のドラッグ時に動きが検出されるたびにトリガーされます。
ユーザーがマウス/タッチをリリースした後、ドラッグ ゴースト要素が DOM から削除され、が発生されます。
イベントの性質上、短い期間で何度もトリガーされる可能性があり、トリガーされたときに実行される複雑な操作のパフォーマンスの問題が発生することがあります。
### ゴーストでドラッグします
ディレクティブは、テンプレートに追加して DOM 要素に適用できます。
```html
```
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 and the 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 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.
### アニメーション
要素がドラッグされている場合、デフォルトでニメーションは適用されません。
```html
Drag me!bin
```
### ドラッグ可能な要素を無視する
ユーザーが igxDrag をインスタンス化したメイン要素の操作可能な子を使用したい場合は、ディレクティブを設定することにより、igxDrag からは無視され、ドラッグ アクションを実行しないようにすることができます。これにより、これらの要素は完全に操作可能になり、すべてのマウス イベントを受信します。
The directive can be applied to any DOM element just like the directive.
By default, the directive doesn't apply any logic for modifying the dragged element position in the DOM. That's why you need to specify a or apply custom logic. Drop strategies are discussed in the next section.
## Angular Drop ディレクティブの使用
ディレクティブを使用してドラッグされている要素を領域に配置する場合、を使用します。要素が適用される要素の境界に入ったかどうか、その後要素内でリリースされているかを決定するために使用できるイベントを提供します。
ディレクティブは、ディレクティブと同じように、任意の DOM 要素に適用できます。
デフォルトで、ディレクティブは DOM のドラッグされた要素の位置を変更するためのロジックを適用しません。そのため、を指定するか、カスタム ロジックを適用する必要があります。ドロップ ストラテジについては、次のセクションで説明します。
- `Prepend` - always inserts the dropped element as first child and is implemented as a class named .
- `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 .
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.
```typescript
public appendStrategy = IgxAppendDropStrategy;
```
```html
```
### ドロップ ストラテジ
`igxDrop` には、`Default`、`Prepend`、`Insert` および `Append` の 4 つのドロップ ストラテジがあります。
- `Default` - 要素が `igxDrop` 要素にドロップされた場合にアクションを実行せず、という名前のクラスとして実装されます。
```typescript
public appendStrategy = IgxAppendDropStrategy;
```
```html
```
- `Append` - ドロップされた要素を常に最後の子として挿入し、という名前のクラスとして実装されます。
#### ドロップ ストラテジのキャンセル
特定のドロップ ストラテジを使用する場合、`cancel` プロパティを true に設定して イベントでその動作をキャンセルできます。`Dropped` イベントは `igxDrop` に固有です。`igxDrop` にドロップ ストラテジを適用していない場合、イベントをキャンセルしても副作用はありません。
```html
```
例:
### ドラッグとドロップ要素のリンク
それぞれ `igxDrag` および `igxDrop` ディレクティブで および 入力を使用すると、異なる要素をリンクして相互間にのみ操作できます。たとえば、特定の `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
- - - - - - ## リファレンス
コミュニティに参加して新しいアイデアをご提案ください。
- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)