はじめに
ドラッグアンドドロップは、多くのグラフィカルユーザーインターフェイスで見られる一般的なユーザー操作です。
アプリにドラッグアンドドロップ機能を追加するための既存のJavaScriptライブラリがあります。ただし、ライブラリが利用できない場合や、プロジェクトに必要のないオーバーヘッドや依存関係が発生する場合があります。このような状況では、最新のWebブラウザで利用できるAPIの知識により、代替ソリューションが提供されます。
HTMLドラッグアンドドロップAPIは、DOMのイベントモデルに依存して、ドラッグまたはドロップされているものに関する情報を取得します。ドラッグアンドドロップでその要素を更新します。 JavaScriptイベントハンドラーを使用すると、任意の要素をドラッグ可能なアイテムまたはドロップできるアイテムに変えることができます。
このチュートリアルでは、HTMLのドラッグアンドドロップを使用してドラッグアンドドロップの例を作成します。イベントハンドラーを使用するためのバニラJavaScriptを備えたAPI。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- サポートする最新のウェブブラウザドラッグアンドドロップAPI（Chrome 4以降、Firefox 3.5以降、Safari 3.1以降、Edge 18以降）。
ステップ1—プロジェクトと初期マークアップの作成
私たちのプロジェクトは、2種類の子要素を持つコンテナで構成されます。
- ドラッグできる子要素
- 要素をドロップできる子要素
まず、ターミナルウィンドウを開き、新しいプロジェクトディレクトリを作成します。
次に、そのディレクトリに移動します。
次に、そのディレクトリにindex.htmlファイルを作成します。
次に、HTMLWebページの定型コードを追加します。
そしてタグは、draggableアイテムとdropzone（ドロップターゲット）を追加します：
ファイルを保存して閉じます。次に、style.cssファイルを作成します。
次に、index.htmlファイル：
これにより、アプリにフォーマットが追加されます。これで、ブラウザでindex.htmlを表示し、これによりdraggable <div>が生成されることを確認できます。 a dropzone <div>。
次に、draggable属性を追加して、最初の<div>を明示的にドラッグ可能にします。
ファイルを保存して閉じます。
最後に、ブラウザでindex.htmlをもう一度表示します。 draggable <div>をクリックして画面上でドラッグすると、移動していることが視覚的に示されます。
draggable属性のデフォルト値はautoです。つまり、要素がドラッグ可能かどうかは、ブラウザのデフォルトの動作によって決まります。通常、これは、draggable="true"を指定せずにテキストの選択、画像、およびリンクをドラッグできることを意味します。
これで、ドラッグ可能な要素を含むHTMLファイルが作成されました。 oneventハンドラーの追加に進みます。
ステップ2—JavaScriptを使用したドラッグアンドドロップイベントの処理
現在、ドラッグ可能な要素をドラッグしながらマウスを離すと、何も起こりません。 DOM要素のドラッグまたはドロップでアクションをトリガーするには、ドラッグアンドドロップAPIを利用する必要があります。
-
ondragstart：このイベントハンドラーdraggable要素にアタッチされ、dragstartイベントが発生すると起動します。 -
ondragover：このイベントハンドラーはdropzone要素にアタッチされ、dragoverイベントが発生すると発生します。 -
ondrop：このイベントハンドラーはdropzone要素にもアタッチされ、dropイベントが発生します。
注：合計8つのイベントハンドラーがあります：ondrag、ondragend、ondragenter、ondragexit、ondragleave、ondragover、ondragstart、およびondrop。この例では、すべてを必要とするわけではありません。
まず、index.html ファイルを参照しましょう。 ：
次に、新しいhttps://www.digitalocean.com/community/tutorials/script.jsファイル：
DataTransferオブジェクトは、現在発生しているドラッグに関連する情報を追跡します。ドラッグとドロップで要素を更新するには、DataTransferオブジェクトに直接アクセスする必要があります。これを行うには、DOM要素のDragEventからdataTransferプロパティを選択します。
注：DataTransferオブジェクトは、同時にドラッグされている複数の要素の情報を技術的に追跡できます。この例では、1つの要素のドラッグに焦点を当てます。
dataTransferオブジェクトのsetDataメソッド現在ドラッグされている要素のドラッグ状態情報を設定するために使用できます。次の2つのパラメータを取ります。
- 2番目のパラメータの形式を宣言する文字列
- 転送される実際のデータ
私たちの目標draggable要素を新しい親要素に移動します。一意のidを持つdraggable要素を選択できる必要があります。ドラッグした要素のidをsetDataメソッドで設定して、後で使用できるようにすることができます。
https://www.digitalocean.com/community/tutorials/script.jsファイルに再度アクセスし、setDataを使用する新しい関数を作成します：
注：Internet Explorer 9〜11には、"text/plain"の使用に問題があると報告されています。そのブラウザの形式は"text"である必要があります。
ドラッグされたアイテムのCSSスタイルを更新するには、DOMイベントを使用してそのスタイルに再度アクセスできます。 currentTargetに必要なスタイルを設定します。
関数に追加して、backgroundColorを
：
注：変更したスタイルは、手動で再度更新する必要がありますドラッグのみのスタイルが必要な場合は、ドロップします。ドラッグの開始時に何かを変更した場合、元に戻さない限り、ドラッグされた要素はその新しいスタイルを保持します。
これで、ドラッグの開始時に使用するJavaScript関数ができました。
ondragstartをindex.htmlのdraggable要素に追加できます。
ブラウザでindex.htmlを表示します。ここでアイテムをドラッグしようとすると、関数で宣言されたスタイルが適用されます。
ただし、何も起こりません。クリックを離したとき。
このシーケンスで起動される次のイベントハンドラーはondragoverです。
特定のDOM要素のデフォルトのドロップ動作ブラウザの<div>のように、通常はドロップを受け入れません。この動作は、実装しようとしている動作を傍受します。目的のドロップ動作を確実に得るために、preventDefaultを適用します。
https://www.digitalocean.com/community/tutorials/script.jsファイルに再度アクセスしてpreventDefaultを使用する新しい関数を作成します。次のコードをファイルの最後に追加します：
さて、 ondragoverをindex.htmlのdropzone要素に追加できます。
この時点では、実際のドロップを処理するコードはまだ作成されていません。このシーケンスで発生する最後のイベントハンドラーはondropです。
https://www.digitalocean.com/community/tutorials/script.jsファイルに再度アクセスして、新しい関数を作成しましょう。 。
dataTransferオブジェクトのsetDataメソッドを使用して以前に保存したデータを参照できます。 dataTransferオブジェクトのgetDataメソッドを使用します。設定したデータはidだったので、返されるのは次のとおりです：
取得したidでdraggable要素を選択します。
dropzoneを選択します要素：
draggable要素からdropzone：
dataTransferオブジェクトをリセットします：
これで、ondropをivid = “のdropzone要素に追加できます。 744f9c9ebe “> ：
これが完了すると、ドラッグアンドドロップ機能が完成します。ブラウザでindex.htmlを表示し、draggable要素をdropzoneにドラッグします。
この例では、単一のドラッグ可能なアイテムと単一のドロップターゲットのシナリオを処理します。複数のドラッグ可能なアイテム、複数のドロップターゲットを設定し、他のすべてのドラッグアンドドロップAPIイベントハンドラーを使用してカスタマイズできます。
ステップ3—複数のドラッグ可能なアイテムを使用した高度な例の作成
このAPIの使用方法のもう1つの例は、移動可能なドラッグ可能なタスクを含むToDoリストです。 "To-do"列から"Done"列へ。
独自のやることリストを作成するには、一意のid sからindex.html：
index.htmlを表示しますブラウザで、[To-do]列の項目を[Done]列にドラッグします。 To Doアプリケーションを作成し、機能をテストしました。
結論
この記事では、ドラッグアンドドロップ機能を調べるためのToDoアプリを作成しました。最新のWebブラウザで利用できます。
ドラッグアンドドロップAPIには、ドラッグアンドドロップ以外のアクションをカスタマイズするための複数のオプションがあります。たとえば、ドラッグしたアイテムのCSSスタイルを更新できます。また、アイテムを移動する代わりに、ドラッグ可能なアイテムをコピーして、ドロップ時に複製されるようにすることもできます。
多くのウェブブラウザはこのテクノロジーをサポートしていますが、信頼できない場合があることに注意してください。オーディエンスがこの機能をサポートしていないデバイスで構成されている場合は、その上にあります。
ドラッグアンドドロップAPIを使用してドロップできるすべての詳細については、MDNのドキュメントを確認してください。