ドラッグアンドドロップAPIの使用方法

ドラッグアンドドロップAPIを使用して、ユーザー向けのインタラクティブなエクスペリエンスを作成する方法をご覧ください

ドラッグアンドドロップAPIを使用すると、ページ内のどの要素をドラッグ可能にするかを定義し、ユーザーが要素をドラッグしたときにインターセプトすることができます。

最新のブラウザで非常によくサポートされています。

Browser support

APIの学習を開始する前に、ページ内のどの要素を定義するかを知っておく必要がありますドラッグ可能。これを行うには、draggableページHTMLの属性、値はtrue

<div draggable="true">
  ...
</div>

これは、要素をドラッグ可能にするのに十分です。

ヒント:設定しない限り、画像、テキストの選択、リンクはデフォルトでドラッグ可能ですdraggableそれらを偽る

ブラウザ内のユーザーコンピュータからファイルをドラッグすることもできます。この場合、転送していますファイル

要素をどこにドラッグできるかは、明確にする必要があるもう1つのポイントです。要素をドラッグするだけでなく、要素にドロップすることもできません。要素は有効である必要がありますドロップターゲット

要素をドロップターゲットにするには、その要素をリッスンしますdragoverイベントとあなたはそれからfalseを返すか、あなたが呼び出すpreventDefault()渡されたイベントについて:

const element = document.querySelector('#my-drop-target)
element.addEventListener('dragover', event => {
  event.preventDefault()
})

そうすると、ドラッグ可能な要素とドロップターゲットができて、開始できます。ドラッグ可能な要素で操作できるイベントは次のとおりです。

  • dragstart
  • drag
  • dragend

ドロップターゲットについて:

  • dragenter
  • dragover
  • dragleave
  • drop

ドラッグアンドドロップ操作と発生したイベントの概要

ユーザーがドラッグを開始するとドラッグ可能な要素、マウスでクリックしてマウスを移動するか、タップしてタップを維持してから選択範囲を移動します。dragstartイベントが発生します:

element.addEventListener('dragstart', event => {
  //...
})

ザ・eventイベント処理関数にパラメータとして渡されるオブジェクトはDragEventオブジェクト。

それはより一般的なものから拡張されますイベントオブジェクト、他のすべてのイベントと共有:マウス、キーボード、スクロールなど。

この時点で、要素はドラッグされており、dragイベントが発生します。アイテムがドラッグされているときに複数回使用されるため、のようにスロットルを使用する必要があります。scrollまたはmouseoverイベント。

入るとすぐにドロップターゲット

  1. インクルードdragenterドロップターゲットでイベントが発生します
  2. インクルードdragoverドロップターゲットでイベントが発生します

ドラッグされた要素が最初にドロップターゲットに入り、次にそれから離れる場合、dragleaveイベントはドロップターゲットで発生します。

ユーザーがマウスを離すと、dragendドラッグされている要素でイベントが発生し、dropイベントはドロップターゲットで発生します。

データのドラッグ:DataTransfer

ドラッグアンドドロップに関連するすべてのイベントはDragEvent私が言ったようにオブジェクト、そしてそれはと呼ばれるプロパティが付属していますdataTransferドラッグされるデータを保持し、5つのプロパティを提供します。

  • dropEffect
  • effectAllowed
  • files
  • items(読み取り専用)
  • types(読み取り専用)

ドラッグイベントが開始されると、いくつかの操作を実行できます。

効果を設定/取得

ドラッグ操作の目的の効果を設定するには、effectAllowedのプロパティdragstartイベント。ドロップターゲットがドロップされた要素を処理する方法を設定するいくつかのオプションがあります。

  • none落とさないでください
  • move移動可能
  • copyコピーできます
  • linkリンクできます
  • copyMoveコピーまたは移動できます
  • copyLinkコピーまたはリンクできます
  • linkMove移動またはリンクできます
  • allコピー、移動、リンクすることができます

(すべて文字列です)。

デフォルトはall

ザ・dropEffectプロパティは、ドラッグアンドドロップ操作のタイプを取得するために使用されます。今回は、ユーザーが修飾キーを使用して設定します。たとえば、MacでAltキーは、アイテムを移動する代わりにコピーするようにドロップターゲットを設定します。

このプロパティは読み取り専用ではありません。私たちはそれを編集することができますdragenterまたはdragoverイベント、これらの文字列値の1つに:

  • none落とさないでください
  • move移動可能
  • copyコピーできます
  • linkリンクできます

例:

element.addEventListener('dragenter', event => {
  event.dataTrasfer.dropEffect = 'move'
})

転送されるデータ

から転送されているアイテムにアクセスできますdataTransfer.itemsプロパティ。これは配列のようなオブジェクトであり、ループを使用して繰り返し、それぞれにアクセスできます。DataTransferItemオブジェクト。

DataTransferItem2つの読み取り専用プロパティがあります。

  • kind:ドラッグされるアイテムの種類。を含む文字列を返しますfileまたはstring
  • typeアイテムのMIMEタイプ

そしてそれは2つの方法があります:

  • getAsFile()を返しますFileドラッグされるデータを表すオブジェクト
  • getAsString()ドラッグされているデータを表す文字列オブジェクトを一時停止するコールバック関数を実行します

それらの名前は似ていますが、動作が大きく異なります。最初はFileオブジェクト:

element.addEventListener('dragenter', event => {
  for (item of event.dataTrasfer.items) {
    const theFile = item.getAsFile()
  }
})

ファイルオブジェクトの詳細については、https://flaviocopes.com/file/

2つ目は、アイテムを文字列としてコールバック関数に渡します。

element.addEventListener('dragenter', event => {
  for (item of event.dataTrasfer.items) {
    item.getAsString(theString => {
      console.log(theString)
    })
  }
})

ドラッグされているアイテムファイルの種類は、typesのプロパティdataTransferオブジェクト。文字列を含む配列ですstringデフォルトでは。ファイルをドラッグしている場合、対応するタイプは値の文字列ですFiles

にリストされていることに加えて、転送されているファイルがある場合dataTransfer.items、それらはに保存されますfilesのプロパティdataTransfer

このプロパティは、FileListドラッグされているファイルを一覧表示するオブジェクト。

Codepenでこのデモをチェックしてください:

ペンを見るドラッグアンドドロップ!フラビオ・コープス(@flaviocopes) オンCodePen

Tech Wiki Online!