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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでDrag And Dropアプリのスタイリングをしよう！

ページ(HTML)の作成

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

<!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>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

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

スタイル(CSS)を装飾

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

* {
  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;
  }
}

* {

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です。

要素を取得する

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

// 要素を取得する
const fill = document.querySelector('.fill')
const empties = document.querySelectorAll('.empty')

// 要素を取得する

const fill = document.querySelector('.fill')

const empties = document.querySelectorAll('.empty')

イベントの型を用意

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

// 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イベント

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イベントを登録しておきましょう。

// イベントを登録
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)
}

// イベントを登録

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開始時のイベントです。

function dragStart() {
  // cssで装飾するためクラスをつける
  this.className += ' hold'
  // ドラッグ元の画像が消えるように制御
  setTimeout(() => this.className = ' invisible', 0)
}

function dragStart() {

// cssで装飾するためクラスをつける

this.className += ' hold'

// ドラッグ元の画像が消えるように制御

setTimeout(() => this.className = ' invisible', 0)

}

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

dragendイベント

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

function dragEnd() {
  // fillクラスをつける
  this.className = 'fill'
}

function dragEnd() {

// fillクラスをつける

this.className = 'fill'

}

dropイベント

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

function dragDrop() {
  // emptyクラスをつける
  this.className = 'empty'
  // fill要素を追加
  this.append(fill)
}

function dragDrop() {

// emptyクラスをつける

this.className = 'empty'

// fill要素を追加

this.append(fill)

}

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

    <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>

</div>

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

dragoverイベント

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

function dragOver(e) {
  // デフォルトの動作をキャンセル
  e.preventDefault()
}

function dragOver(e) {

// デフォルトの動作をキャンセル

e.preventDefault()

}

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

dragenterイベント

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

function dragEnter(e) {
  // デフォルトの動作をキャンセル
  e.preventDefault()
  // hoveredクラスをつける
  this.className += ' hovered'
}

function dragEnter(e) {

// デフォルトの動作をキャンセル

e.preventDefault()

// hoveredクラスをつける

this.className += ' hovered'

}

dragleaveイベント

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

function dragLeave() {
  // emptyクラスをつける
  this.className = 'empty'
}

function dragLeave() {

// emptyクラスをつける

this.className = 'empty'

}

これで完成です。

おわりに

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

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

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

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
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)
}

// 要素を取得する

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)

}

月	火	水	木	金	土	日
				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

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

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

イベントの型を用意

イベントの登録

dragstartイベント

dragendイベント

dropイベント

dragoverイベント

dragenterイベント

dragleaveイベント

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

イベントの型を用意

イベントの登録

dragstartイベント

dragendイベント

dropイベント

dragoverイベント

dragenterイベント

dragleaveイベント

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Beegoフレームワークでアプリ開発 ～チュートリアル1～

[golang]Echo APIのErrorメッセージをカスタマイズする

[Golang/React]~MovieApp3: Formを作成しよう!~

[Go言語]Genericsが導入された!!!~Go 1.18~

React~記事まとめ~

[Golang]~MovieApp-router1: JWTを使ってSign…

Go言語 ~基礎編~ 条件とループ

Go言語で作るMiddleWare(by REST API)

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル

Beegoフレームワークでアプリ開発～チュートリアル1～