JavaScriptでDrag And Dropアプリを実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、JavaScriptでDrag And Dropを実装する方法を学びました。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

画像は、「Unsplash Source」というサービスを使って、動的に取得しています。

JavaScriptの実装

準備が完了したので、JavaScriptを実装していきましょう。

Drag And Dropを実装するために、「HTML Drag and Drop API」を使います。これは、アプリケーションにDrag And Drop機能を提供するためのAPIです。

要素を取得する

画面操作に必要な要素を取得します。

イベントの型を用意

Drag And Dropイベントを制御するために、沢山のDragイベントを制御する必要があるため、先に型を定義しておきましょう。

イベントの登録

Dragイベントを登録しておきましょう。

これで、それぞれのイベントが発生した時に、それに紐づく関数が実行されるようになりました。例えば、dragstartイベントが発火した時は、dragStart関数が実行されます。

dragstartイベント

最初に「dragstart」イベント処理を作成します。これは、Drag開始時のイベントです。

このイベントは、「fill.addEventListener(‘dragstart’, dragStart)」で発生しているので、「this」には、fillの情報が入っています。

dragendイベント

次は、「dragend」イベント処理を作成します。これは、Dragイベント終了時のイベントです。

dropイベント

次は、「drop」イベント処理を作成します。これは、Dragターゲットが、Drag有効エリアにDropされた時に発生するイベントです。

Drop有効エリアは、以下のようなHTMLになっています。

dropイベントは、「empty.addEventListener(‘drop’, dragDrop)」にて登録しています。そのため、thisにはDrop先のemptyクラスを持つ要素の情報が格納されています。そして、「this.append(fill)」を実行するとその要素にDragターゲットが追加されます。

dragoverイベント

次は、「dragover」イベント処理を作成します。これは、DragターゲットがDrag先のエリアにDropされた時、Dragを有効(Drag有効エリア)にするイベントです。Dragが有効とされていない場合、Dragできません

preventDefault」は、イベントが発生した要素のデフォルトの挙動をキャンセルするメソッドです。この記事によるとデフォルトのdragOverイベントハンドラーの処理をキャンセルしないとDragできないようになっているらしいです。

dragenterイベント

次は、「dragenter」イベント処理を作成します。これは、Drag有効エリアにDragターゲットが入った時に発火するイベントです。

dragleaveイベント

次は、「dragleave」イベント処理を作成します。これは、DragターゲットがDrag有効エリアから離れた時に発生するイベントです。

これで完成です。

おわりに

いかがだったでしょうか。

JavaScrptでDrag And Dropが実装できるようになると、面白いアプリケーションとかできそうですよね。

ファイルアップロードもDrag And Dropで実装してみるのもありだな。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す