JavaScriptは、24以上のフレームワークと約84のライブラリを備えた、最も人気のあるプログラミング言語の1つです。すべてのブラウザで本質的にサポートされている唯一のプログラミング言語です。さらに、この言語は動的型付けをサポートしており、レンダリングやアニメーションに最適です。JavaScriptを活用して、フロントエンドにインタラクティブな動作を追加したり、バックエンドを制御したり、Webやモバイルアプリケーションを作成したりできます。あらゆるWebサイトにエフェクトを追加してカスタマイズ可能にするオプションにより、この言語は世界中の開発者の間で人気を集めています。
このガイドでは、純粋なバニラJavaScriptを使用してドラッグ＆ドロップ要素を作成する手順を説明します。さらに、一歩進んで、HTML ドラッグ＆ドロップ APIイベントハンドラーを使用した「モーニングスケジューラー」アプリを構築します。
前提条件
このチュートリアルを進めるには、以下が必要です。
ステップ1：新しいプロジェクトの作成
まず、2つの子要素を持つコンテナを作成します。最初の子要素をドラッグ用に使用し、2番目の子要素をドラッグされた要素を格納するために使用します。
|
注意： このチュートリアルでは、コンテナをドラッグされたすべての要素を保持するストアとして扱います。簡単に言うと、最初の子要素からドラッグされたすべての要素が2番目の子要素にドロップされます。 |
|
1 |
$ mkdir drag-and-drop-demo |
次に、 cd コマンドを使用して、ディレクトリを drag-and-drop-demo フォルダに変更します：
|
1 |
$ cd drag-and-drop-demo |
ステップ2：初期セットアップ
このチュートリアルでは、HTML、CSS、JavaScriptファイルを作成して接続します。まず、ファイル名をそれぞれ index.html, styles.css、および scripts.js ファイルとします。
次に、「My Morning Planner」 というタイトルを index.html ファイルに追加します：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Morning Planner</title> </head> <body> </body> </html> |
次に、CSSをリンクし、JavaScriptをHTMLに追加します:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>My Morning Planner</title> </head> <body> </body> </html> |
次に、以下のコード行を <body>タグ内に追加します：
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>マイ モーニング プランナー</title> </head> <body> <div class="container"> <h1><center>マイ モーニング プランナー</center></h1> <h2 class="draggable" draggable="true">ジムに行く</h2> <h2 class="draggable" draggable="true">30分間読書する</h2> <h2 class="draggable" draggable="true">オートミールを準備する</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">冷たいシャワーを浴びる</h2> <h2 class="draggable" draggable="true">一日を始める</h2> </div> </body> </html> |
保存して、 index.htmlファイルを閉じます。その後、ブラウザで index.htmlファイルを開いてみると、ページが表示されます：
次に、 index.htmlのスタイルをCSSで設定し、見栄えを良くしましょう。
ステップ 3: CSSを使用したスタイリング
次に、 index.htmlファイルに含めたすべての要素にスタイルを追加します：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
ブラウザで index.htmlファイルを開いて、出力を確認してください：
構造化を完了し、スタイルを追加しましたが、要素はまだ静的です。つまり、動的な機能を追加するまでは、要素を移動したりスクロールしたりすることはできません。次のステップでは、JavaScriptを導入して動的な動作を追加します。
ステップ 4: JavaScriptの導入
このステップでは、JavaScriptを導入し、すべてのドラッグ要素を機能させます。JSファイルで、必要となる要素を設定します。まずは以下を定義しましょう。 draggable と containers を定義して、それぞれ要素をドラッグ＆ドロップできるようにします。
次の2行のコードを scripts.js ファイルに追加します：
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
次に、すべてのイベントリスナーを設定します。まずは “dragstart” 要素を最初のイベントリスナーとして追加し、クラスリストを add します。同様に、 “dragend” 要素を2番目のイベントリスナーとして追加し、クラスリストを remove します。
次の EventListeners を scripts.js ファイルに貼り付けます：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
次に、要素をホバーして移動させるための “dragover” EventListener を追加します。 draggable 要素を querySelector を使用して設定し、そのドラッグ可能な要素を現在のコンテナに追加します：
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
デフォルトでは、要素内へのドロップは無効になっています。 e.preventDefault を使用して有効にします：
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
次に、マウスの位置を特定するための要素を作成します。まずは、2つのパラメータを受け取る関数 getDragAfterElement を作成することから始めましょう。最初のパラメータは container で、2番目のパラメータ y はマウスの縦方向の位置を処理します。次に、 querySelectorAll 関数を使用して、ドラッグ可能な要素を取得します。コンテナ内のすべてのドラッグ可能な要素に対して draggableElements を定義します：
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
次に、 reduce 関数を呼び出し、ドラッグ可能な要素のリストをループ処理して、マウスクソールの後ろにある単一の要素を特定します。次に、最初の要素を return します。その際、最初の要素を closest 、2番目の要素を child とします。また、 offset を算出し、条件を追加します。
次のコード行を scripts.jsファイルに追加します：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
これを次の scripts.js ファイルに含めます：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
これで必要なセットアップが完了しました。ブラウザを開いて、 index.htmlを実行します。ブラウザに「“My Morning Scheduler”」ページが表示され、ドラッグ＆ドロップのオプションが利用できます。中央の白い線は、すでに完了したタスクとこれから行うタスクを区別する境界線として機能します：
まとめ
ドラッグ＆ドロップは、現代のウェブサイトで使用するのに優れた機能です。このガイドでは、初心者向けにチュートリアルをわかりやすくするため、いくつかのイベントハンドラーを使用しました。イベントハンドラーは全部で8つあり、学習が進むにつれてそれらを使用してみることをお勧めします。このチュートリアルで使用した関数やコードの扱いに慣れたら、次のようなJavaScriptのトピックをさらに深く掘り下げることができます：jQuery。また、学んだ概念を使って、To-Doアプリや、JavaScriptの日付と時刻の機能を使用した週間の進捗トラッカー、その他のアプリケーションの作成に挑戦することもできます。
JavaScriptやウェブ開発のトピックについてさらに詳しく学ぶには、当ブログのこれらのリソースを確認してください：:
- JavaScriptツール：localStorageとsessionStorage
- JavaScriptの操作：オブジェクトとは何か
- JavaScriptでJSONを扱うためのチュートリアル
- JavaScriptの扱い方：クラスの仕組み
快適なコンピューティングを！
コメント
コメントはまだありません。最初のコメントを投稿しましょう。