こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、JavaScriptでDrag And Dropを実装する方法を学びました。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Drag N Drop</title> </head> <body> <div class="empty"> <div class="fill" draggable="true"></div> </div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾
次にスタイルを記述しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
* { box-sizing: border-box; } body { background-color: steelblue; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .empty { height: 150px; width: 150px; margin: 10px; border: solid 3px black; background: white; } .fill { background-image: url('https://source.unsplash.com/random/150x150'); height: 145px; width: 145px; cursor: pointer; } .hold { border: solid 5px #ccc; } .hovered { background-color: #333; border-color: white; border-style: dashed; } @media (max-width: 800px) { body { flex-direction: column; } } |
ここまで実装すると以下のようになります。

画像は、「Unsplash Source」というサービスを使って、動的に取得しています。
JavaScriptの実装
準備が完了したので、JavaScriptを実装していきましょう。
Drag And Dropを実装するために、「HTML Drag and Drop API」を使います。これは、アプリケーションにDrag And Drop機能を提供するためのAPIです。
要素を取得する
画面操作に必要な要素を取得します。
1 2 3 |
// 要素を取得する const fill = document.querySelector('.fill') const empties = document.querySelectorAll('.empty') |
イベントの型を用意
Drag And Dropイベントを制御するために、沢山のDragイベントを制御する必要があるため、先に型を定義しておきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Dragイベント function dragStart() { console.log("Drag Start") } function dragEnd() { console.log("Drag End") } function dragOver() { console.log("Drag Over") } function dragEnter() { console.log("Drag Enter") } function dragLeave() { console.log("Drag Leave") } function dragDrop() { console.log("Drag Drop") } |
イベントの登録
Dragイベントを登録しておきましょう。
1 2 3 4 5 6 7 8 9 10 11 |
// イベントを登録 fill.addEventListener('dragstart', dragStart) fill.addEventListener('dragend', dragEnd) for (const empty of empties) { empty.addEventListener('dragover', dragOver) empty.addEventListener('dragenter', dragEnter) empty.addEventListener('dragleave', dragLeave) empty.addEventListener('drop', dragDrop) } |
これで、それぞれのイベントが発生した時に、それに紐づく関数が実行されるようになりました。例えば、dragstartイベントが発火した時は、dragStart関数が実行されます。
dragstartイベント
最初に「dragstart」イベント処理を作成します。これは、Drag開始時のイベントです。
1 2 3 4 5 6 |
function dragStart() { // cssで装飾するためクラスをつける this.className += ' hold' // ドラッグ元の画像が消えるように制御 setTimeout(() => this.className = ' invisible', 0) } |
このイベントは、「fill.addEventListener(‘dragstart’, dragStart)」で発生しているので、「this」には、fillの情報が入っています。
dragendイベント
次は、「dragend」イベント処理を作成します。これは、Dragイベント終了時のイベントです。
1 2 3 4 |
function dragEnd() { // fillクラスをつける this.className = 'fill' } |
dropイベント
次は、「drop」イベント処理を作成します。これは、Dragターゲットが、Drag有効エリアにDropされた時に発生するイベントです。
1 2 3 4 5 6 |
function dragDrop() { // emptyクラスをつける this.className = 'empty' // fill要素を追加 this.append(fill) } |
Drop有効エリアは、以下のようなHTMLになっています。
1 2 3 4 5 6 7 |
<div class="empty"> <div class="fill" draggable="true"></div> </div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> |
dropイベントは、「empty.addEventListener(‘drop’, dragDrop)」にて登録しています。そのため、thisにはDrop先のemptyクラスを持つ要素の情報が格納されています。そして、「this.append(fill)」を実行するとその要素にDragターゲットが追加されます。
dragoverイベント
次は、「dragover」イベント処理を作成します。これは、DragターゲットがDrag先のエリアにDropされた時、Dragを有効(Drag有効エリア)にするイベントです。Dragが有効とされていない場合、Dragできません。
1 2 3 4 |
function dragOver(e) { // デフォルトの動作をキャンセル e.preventDefault() } |
「preventDefault」は、イベントが発生した要素のデフォルトの挙動をキャンセルするメソッドです。この記事によるとデフォルトのdragOverイベントハンドラーの処理をキャンセルしないとDragできないようになっているらしいです。
dragenterイベント
次は、「dragenter」イベント処理を作成します。これは、Drag有効エリアにDragターゲットが入った時に発火するイベントです。
1 2 3 4 5 6 |
function dragEnter(e) { // デフォルトの動作をキャンセル e.preventDefault() // hoveredクラスをつける this.className += ' hovered' } |
dragleaveイベント
次は、「dragleave」イベント処理を作成します。これは、DragターゲットがDrag有効エリアから離れた時に発生するイベントです。
1 2 3 4 |
function dragLeave() { // emptyクラスをつける this.className = 'empty' } |
これで完成です。
おわりに
いかがだったでしょうか。
JavaScrptでDrag And Dropが実装できるようになると、面白いアプリケーションとかできそうですよね。
ファイルアップロードもDrag And Dropで実装してみるのもありだな。
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
// 要素を取得する const fill = document.querySelector('.fill') const empties = document.querySelectorAll('.empty') // Dragイベント function dragStart() { // cssで装飾するためクラスをつける this.className += ' hold' // ドラッグ元の画像が消えるように制御 setTimeout(() => this.className = ' invisible', 0) } function dragEnd() { // fillクラスをつける this.className = 'fill' } function dragOver(e) { // デフォルトの動作をキャンセル e.preventDefault() } function dragEnter(e) { // デフォルトの動作をキャンセル e.preventDefault() // hoveredクラスをつける this.className += ' hovered' } function dragLeave() { // emptyクラスをつける this.className = 'empty' } function dragDrop() { // emptyクラスをつける this.className = 'empty' // fill要素を追加 this.append(fill) } // イベントを登録 fill.addEventListener('dragstart', dragStart) fill.addEventListener('dragend', dragEnd) for (const empty of empties) { empty.addEventListener('dragover', dragOver) empty.addEventListener('dragenter', dragEnter) empty.addEventListener('dragleave', dragLeave) empty.addEventListener('drop', dragDrop) } |
コメントを残す
コメントを投稿するにはログインしてください。