IgxDialogで作成したダイアログをマウスでドラッグ移動できるようする方法

IgxDialogでダイアログをマウスでドラッグ移動できるようするには、IgxDialog内にドラッグの時に使う”つまみ用の場所”を配置し、それにIgxDragHandleディレクティブを使用してください。

たとえば、igx-dialog-title内のdivクラスにIgxDragHandleディレクティブを使用する場合は、以下のようになります。

<igx-dialog #dialog [closeOnOutsideSelect]="false" igxDrag [ghost]="false" (dragMove)="dragMoveEventHandler($event)">
  <igx-dialog-title>
    <div class="title-container" igxDragHandle>
      <igx-icon class="dialog__icon">drag_indicator</igx-icon>
      <span class="dialog__title">Draggable Dialog</span>
    </div>
  </igx-dialog-title>
  <span class="dialog__content">タイトルのアイコンか"Draggable Dialog"の文字列部分をつかんでドラッグするとダイアログウィンドウを動かすことができます。</span>

... (中略) ...

</igx-dialog>

　

サンプル

　

ヘルプ

• 「ハンドルを使用したドラッグ」
  • https://jp.infragistics.com/products/ignite-ui-angular/angular/components/drag-drop#%E3%83%8F%E3%83%B3%E3%83%89%E3%83%AB%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0