vue.js を使用してドラッグ アンド ドロップ機能を実装する方法

序文

ドラッグ アンド ドロップ機能を追加すると、プログラムがより自然でユーザーフレンドリーになります。ドラッグ アンド ドロップ機能を提供するライブラリはありますが、それらが内部でどのように動作するかを理解しておくと便利です。

この記事では、組み込みの HTML ドラッグ アンド ドロップ API を使用して、シンプルなドラッグ アンド ドロップ システムを実装します。このような：

ドラッグアンドドロップAPI

HTML ドラッグ アンド ドロップ API は、いくつかのイベントと属性を含む組み込みメソッドですが、2 種類の要素を念頭に置いて処理するものと要約できます。

1. ドラッグ可能な要素: ドラッグできる要素
2. ドロップ可能な要素: ドラッグされた要素を受け取ることができる要素
   

このように分析すると、ドラッグ アンド ドロップ イベントの分析が容易になります。

ドラッグアンドドロップイベント

プログラムで使用できる API には 8 つのドラッグ アンド ドロップ イベントがあります。

• ドラッグ: ドラッグ可能なアイテムがドラッグされている
• dragstart: ドラッグ可能な要素のドラッグを開始する
• dragend: ドラッグ終了（例えば、マウスを放す）
• dragenter: ドラッグされた項目がドロップ可能な要素に入ります
• dragleave – ドラッグ可能なアイテムがドロップ可能な要素から離れる
• dragover: ドラッグ可能なアイテムがドロップ可能な要素の上を移動する (100 ミリ秒ごとに呼び出されます)
• ドロップ: ドラッグ可能なアイテムがドロップ可能な要素にドロップされます
  

データ転送オブジェクト

ドラッグ アンド ドロップ API について知っておくべき最も重要なことの 1 つは、イベントに dataTransfer オブジェクトが追加されることです。

dataTransfer オブジェクトを使用すると、要素のドラッグを開始するときにデータを設定し、ドロップ ゾーンに要素をドロップするときに同じデータにアクセスできます。

dataTransfer について知っておくべきプロパティとメソッドがいくつかあります (詳細については、dataTransfer API ドキュメントを参照してください)。

• dropEffect: 現在のドラッグアンドドロップ操作（移動、コピーなど）
• effectAllowed: ドラッグアンドドロップ操作を指定します
• setData(name, val): dataTransferオブジェクトに値を追加できます
• getData(name): 保存された値を取得する
  

独自のドラッグアンドドロップシステムを作成する

ご覧のとおり、この例には 2 つのリストがあり、それらの間で項目をスムーズにドラッグ アンド ドロップできます。

プロジェクトの設定

まず、データを設定する必要があります。スクリプトでは、次のプロパティを持つアイテム オブジェクトの配列を作成します。

• id: オブジェクトを検索するための一意のID
• タイトル: 表示されるテキスト
• list: 属するリスト。

この配列に 3 つの項目を追加することにしました。

データ （） {
    戻る {
      アイテム: [
      {
        id: 0,
        タイトル: 「アイテムA」、
        リスト: 1
      },
      {
        id: 1,
        タイトル: 「アイテム B」、
        リスト: 1
      },
      {
        id: 2,
        タイトル: 「アイテムC」、
        リスト: 2
      }]
    }
}

アイテムのリストをリスト 1 とリスト 2 のアイテムだけにフィルター処理するために、2 つの追加の計算プロパティが作成されます。

計算: {
    リスト1() {
      this.items.filter(item => item.list === 1) を返します
    },
    リスト2() {
      this.items.filter(item => item.list === 2) を返します
    }
}

v-for 内で v-if を使用する代わりに、計算プロパティを作成する方が適切です。

テンプレートコードを作成しました

これがコンポーネントの概要です。このコードは、ドラッグ アンド ドロップ機能なしですべてのコンテンツを表示します。

<テンプレート>
  <div>
    <div class='ドロップゾーン'>
      <div v-for='listOne 内の項目' :key='item.title' class='drag-el'>
        {{ item.title }}
      </div>
    </div>
    <div class='ドロップゾーン'>
      <div v-for='listTwo 内の項目' :key='item.title' class='drag-el'>
        {{ item.title }}
      </div>
    </div>
  </div>
</テンプレート>

コンポーネントのスタイルは重要ではありません。ドロップ ゾーンには、内部に要素がない場合でも一定の高さがあることが重要です。そうでないと、その上にマウスを移動できなくなります。

<スタイルスコープ>
  .ドロップゾーン{
    背景色: #eee;
    下マージン: 10px;
    パディング: 10px;
  }

  .ドラッグ-el {
    背景色: #fff;
    下マージン: 10px;
    パディング: 5px;
  }
  
</スタイル>

これは、ドロップ ゾーン スタイルにパディングを追加することで実現されます。

ドラッグアンドドロップ機能の追加

まず、スクリプトにいくつかのメソッドを追加します。1 つは要素のドラッグを開始するときに使用するメソッド、もう 1 つは要素をドロップするときに使用するメソッドです。

startDrag メソッドでは、ドラッグする要素の ID を保存するために、前述の dataTransfer プロパティを使用します。さらに、このドラッグ イベントはアクションになります。

ドラッグ開始: (イベント、アイテム) => {
      evt.dataTransfer.dropEffect = '移動'
      evt.dataTransfer.effectAllowed = '移動'
      evt.dataTransfer.setData('itemID', アイテムID)
}

保存された ID は ondrop で取得され、配列内の正しい項目にアクセスできるようになります。

onDrop (イベント、リスト) {
      定数 itemID = evt.dataTransfer.getData('itemID')
      const item = this.items.find(item => item.id == itemID)
      item.list = リスト
}

以下のテンプレートコードを追加します。

まずイベントにイベントを追加します。要素をドラッグ可能にし、ドラッグ開始イベントを検出する必要があります。

<div 
        クラス='ドラッグ-エル' 
        v-for='リスト2内の項目' 
        :key='アイテム.タイトル' 
        ドラッグ可能
        @dragstart='startDrag($event, item)'
 >
        {{ item.title }}
</div>

draggable 属性を追加したので、プログラムを実行すると、このように要素をドラッグできるようになりますが、どこにもドロップすることはできません。

ドラッグ可能な要素を受け入れるドロップゾーンを追加しましょう。まず、onDrop メソッドを呼び出すドロップ イベント リスナーを追加します。

<div
      クラス='ドロップゾーン'
      @drop='onDrop($event, 1)' 
>

ただし、dragEnter と dragOver の両方のドラッグ アンド ドロップ フックで preventDefault を呼び出す必要があることに注意してください。

デフォルトでは、これら 2 つの方法では要素を削除できないためです。したがって、ドロップ イベントが適切に機能するには、デフォルトのアクションを防止する必要があります。

これは、Vue に組み込まれている .prevent イベント修飾子を使用して実行できます。

<div
      クラス='ドロップゾーン'
      @drop='onDrop($event, 1)' 
      フォロー
      フォロー
>

プログラムを実行すると、すべてが正常に動作することがわかります。 2 つの異なるリスト間で要素をドラッグ アンド ドロップできます。

要約する

この例は非常に単純ですが、HTML ドラッグ アンド ドロップ API がどのように機能するかをよく理解するのに役立ちます。実は思ったほど難しくはありません。

これで、vue.js を使用してドラッグ アンド ドロップ機能を実装する方法に関するこの記事は終了です。vue.js のドラッグ アンド ドロップ機能に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。