ng2-dragulaを使用してAngularアプリにドラッグアンドドロップします

投稿日: 2022-04-20 2022-10-08
タグ: Angular

ドラグラドラッグアンドドロップで人気のあるJavaScriptライブラリです。 ng2-ドラグラ Angular2+アプリでDragulaを使用するためのラッパーです。それがどのように使用されるか見てみましょう。

インストール

まず、 Yarn またはnpmを使用して、プロジェクトにng2-dragulaを追加します。

# Yarn
$ yarn add ng2-dragula

# npm
$ npm install ng2-dragula --save

次に、 DragulaModule をインポートし、NgModuleのインポートに追加します。

app.module.ts

// ...

import { DragulaModule } from 'ng2-dragula/ng2-dragula';

そして最後のセットアップ手順は、DragulaCSSファイルをプロジェクトに追加することです。 Angular CLI を使用している場合は、.angular-cli.jsonファイルにCSSファイルパスを追加するだけです。

"styles": [
  "styles.css",
  "../node_modules/dragula/dist/dragula.css"
],

ng2-dragulaを使用する

これを使用するには、テンプレートのコンテナ要素で dragula ディレクティブを使用し、グループ名を指定するだけです。 Dragulaのグループはバッグと呼ばれます。

<ul [dragula]='"bag-items"'>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

また、複数の異なるコンテナがある場合：

<ul [dragula]='"bag-items"'>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

<ul [dragula]='"bag-people"'>
  <li *ngFor="let person of people">{{ person }}</li>
</ul>

変更をitems配列で同期する場合は、モデルの名前とともにdragulaModelディレクティブを使用するだけです。このように、アイテムをドラッグアンドドロップで並べ替えると、items配列のアイテムも並べ替えられて変更が反映されます。

<ul [dragula]='"bag-items"' [dragulaModel]='items'>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

イベントと構成オプション

DragulaService を使用して、イベントにフックしたり、構成オプションを設定したりできます。

構成

サービスを使用するには、最初にサービスをインポートしてコンストラクターに挿入します。次に、 setOptions メソッドを呼び出し、コンテナを指定し、オブジェクトリテラルに必要なオプションを提供するのと同じくらい簡単です。

import { Component, OnInit } from '@angular/core';

import { DragulaService } from 'ng2-dragula/ng2-dragula';

@Component({ ... })
export class AppComponent implements OnInit {
  constructor(private dragula: DragulaService) {
    this.dragula.setOptions('bag-items', {
      revertOnSpill: true
    });
  }
}

direction 、 copy 、 copySortSource 、 revertOnSpill 、 removeOnSpill 、mirrorContainerなどのオプションを設定できます。設定オプションについては、プロジェクトページを参照してください。

イベント

drag 、 drop 、 over 、 out イベントにフックすると、各イベントがオブザーバブルを返します。アイテムをドラッグまたはドロップしたときにメッセージが表示される完全な例を次に示します。

import { Component, OnInit } from '@angular/core';

import { DragulaService } from 'ng2-dragula/ng2-dragula';

@Component({ ... })
export class AppComponent implements OnInit {
  msg = '';

  items = [
    'Candlestick',
    'Dagger',
    'Revolver',
    'Rope',
    'Pipe',
    'Wrench'
  ];

  constructor(private dragula: DragulaService) { }

  ngOnInit() {
    this.dragula
      .drag
      .subscribe(value => {
        this.msg = `Dragging the ${ value[1].innerText }!`;
      });

    this.dragula
      .drop
      .subscribe(value => {
        this.msg = `Dropped the ${ value[1].innerText }!`;

        setTimeout(() => {
          this.msg = '';
        }, 1000);
      });
  }
}

ドラッグイベントとドロップイベントの両方のオブザーバブルによって返される値は、バッグ名を含む配列です（例：バッグアイテム）、ドラッグされた要素とコンテナ要素（

エレメント）。

私たちのアプリが機能しています！ 🎥

getdocs

13036