Zenn
🔰

interact.jsでかんたんドラッグ&ドロップ

2022/08/03に公開
JavaScript
初心者
初心者向け
ドラッグ
ドロップ
tech

interact.jsとは!?

interact.jsを利用することで、ドラッグ&ドロップを簡単に実現することができます。

interact.js

今回はこのライブラリを利用して、クイズに使えそうなサンプルを作ってみます。
(とても簡単ですよ!!)

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ index.html (プログラムを起動するファイルです)
　├ custom.css (スタイルシートを記述するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)

HTMLファイルを編集する

では、作っていきましょう。
用意したHTMLファイルには、下記コードを記述します。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" href="./custom.css"></style>
</head>
<body>
	<!-- Drop -->
	<div class="my-area">
		<div class="drop" quiz="q1">最高経営責任者</div>
		<div class="drop" quiz="q2">事業遂行責任者</div>
		<div class="drop" quiz="q3">情報システム責任者</div>
		<div class="drop" quiz="q4">技術業務責任者</div>
	</div>
	<!-- Drag -->
	<div class="my-area">
		<div class="drag" quiz="q1">CEO</div>
		<div class="drag" quiz="q2">COO</div>
		<div class="drag" quiz="q3">CIO</div>
		<div class="drag" quiz="q4">CTO</div>
	</div>
	<!-- interactjs -->
	<script src="//cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
	<script src="./main.js"></script>
</body>
</html>

interact.jsの利用に必要なファイルはCDNで読み込んでいます。
(インターネットから読み込む事でプロジェクトがシンプルになりますね)

JavaScriptファイル

index.html(抜粋)
<!-- interactjs -->
<script src="//cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js">

そして、ドロップ対象とドラッグ対象になるタグを2つづつ用意します。
ペアになるタグの"quiz"アトリビュートには同じ値を付けておきましょう。
(ここではq1としました)
この値を判定に利用します。

index.html(抜粋)
<!-- ドロップ対象のタグ -->
<div class="drop" quiz="q1">最高経営責任者</div>
<!-- ドラッグ対象のタグ -->
<div class="drag" quiz="q1">CEO</div>

CSSファイルを編集する

CSSファイルには、下記コードを記述します。

custom.css
/* CSS */

body{
	margin: 0px; padding: 20px;
}

.my-area{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	/*background-color: silver;*/
	text-align: center;
}

.my-area div{
	display: inline-block;
}

.drag{
	width: 60px; height: auto;
	margin: 5px; padding: 30px;
	background-color: royalblue;
	color: white; border-radius: 10px;
	touch-action: none; user-select: none;
	text-align: center;
}

.drop{
	width: 150px; height: 80px;
	margin: 5px; padding: 10px;
	background-color: darkslateblue;
	color: white; border-radius: 10px;
	touch-action: none; user-select: none;
	text-align: center;
}

このファイルの説明は特に要りませんね。

JavaScriptファイルを編集する

最後に、JavaScriptファイルにコードを記述していきます。
(次のコードを見れば一目瞭然ですね)

main.js
console.log("main.js!!");

// Drag
interact(".drag").draggable({
	onstart(e){
		if(!e.target.posX) e.target.posX = 0;
		if(!e.target.posY) e.target.posY = 0;
		e.target.style.backgroundColor = "royalblue";
	},
	onmove(e){
		e.target.posX += e.dx;
		e.target.posY += e.dy;
		e.target.style.transform = 
			`translate(${e.target.posX}px, ${e.target.posY}px)`;
	}
});

// Drop
interact(".drop").dropzone({
	ondrop(e){
		//console.log(e.target, e.relatedTarget);
		const dragQuiz = e.relatedTarget.getAttribute("quiz");
		const dropQuiz = e.target.getAttribute("quiz");
		if(dragQuiz == dropQuiz){
			console.log("あたり!!");
			e.relatedTarget.style.backgroundColor = "orange";
		}
	}
}).on("dropactivate", function(e){
	e.target.classList.add("drop-activated");
});

ドラッグ対象を指定

ドラッグ対象を指定するコードは次の箇所です。
セレクタにはクラス名を指定します。
(#をつける事でidを指定する事も可能です)

main.js(抜粋)
// Drag
interact(".drag").draggable({});

オプションには、主に次の様なイベントが用意されています。

オプション 意味
onstart ドラッグ開始時
onmove ドラッグ時
onend ドラッグ終了時

ドロップ対象を指定

ドロップ対象を指定するコードは次の箇所です。
セレクタにはクラス名を指定します。
(#をつける事でidを指定する事も可能です)

main.js(抜粋)
// Drop
interact(".drop").dropzone({});

先程と同様に、オプションには主に次の様なイベントが用意されています。

オプション 意味
ondrop ドロップ時

ドラッグ&ドロップ時の判定

ドロップしたタイミング(ondrop)で判定処理を実行しています。
引数の"e"から、ドラッグ対象とドロップ対象のオブジェクトをそれぞれ抜き出し、
タグに付与しておいた"quiz"アトリビュートを比較します。
(あっさりしていますね!!)

main.js(抜粋)
const dragQuiz = e.relatedTarget.getAttribute("quiz");
const dropQuiz = e.target.getAttribute("quiz");
if(dragQuiz == dropQuiz){
	console.log("Collect!!");
	e.relatedTarget.style.backgroundColor = "orange";
}

これだけでドラッグ&ドロップが完成してしまいます。

やりました!!

全体のコード

最後に全体のコードを載せておきますね。

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" href="./custom.css"></style>
</head>
<body>

	<!-- Drop -->
	<div class="my-area">
		<div class="drop" quiz="q1">最高経営責任者</div>
		<div class="drop" quiz="q2">事業遂行責任者</div>
		<div class="drop" quiz="q3">情報システム責任者</div>
		<div class="drop" quiz="q4">技術業務責任者</div>
	</div>

	<!-- Drag -->
	<div class="my-area">
		<div class="drag" quiz="q1">CEO</div>
		<div class="drag" quiz="q2">COO</div>
		<div class="drag" quiz="q3">CIO</div>
		<div class="drag" quiz="q4">CTO</div>
	</div>

	<!-- interactjs -->
	<script src="//cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
	<script src="./main.js"></script>
</body>
</html>
custom.css
/* CSS */

body{
	margin: 0px; padding: 20px;
}

.my-area{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	/*background-color: silver;*/
	text-align: center;
}

.my-area div{
	display: inline-block;
}

.drag{
	width: 60px; height: auto;
	margin: 5px; padding: 30px;
	background-color: royalblue;
	color: white; border-radius: 10px;
	touch-action: none; user-select: none;
	text-align: center;
}

.drop{
	width: 150px; height: 80px;
	margin: 5px; padding: 10px;
	background-color: darkslateblue;
	color: white; border-radius: 10px;
	touch-action: none; user-select: none;
	text-align: center;
}
main.js
console.log("main.js!!");

// Drag
interact(".drag").draggable({
	onstart(e){
		if(!e.target.posX) e.target.posX = 0;
		if(!e.target.posY) e.target.posY = 0;
		e.target.style.backgroundColor = "royalblue";
	},
	onmove(e){
		e.target.posX += e.dx;
		e.target.posY += e.dy;
		e.target.style.transform = 
			`translate(${e.target.posX}px, ${e.target.posY}px)`;
	}
});

// Drop
interact(".drop").dropzone({
	ondrop(e){
		//console.log(e.target, e.relatedTarget);
		const dragQuiz = e.relatedTarget.getAttribute("quiz");
		const dropQuiz = e.target.getAttribute("quiz");
		if(dragQuiz == dropQuiz){
			console.log("Collect!!");
			e.relatedTarget.style.backgroundColor = "orange";
		}
	}
}).on("dropactivate", function(e){
	e.target.classList.add("drop-activated");
});

いかがでしたでしょうか。
手短では御座いましたが、interact.jsを簡単に解説させて頂きました。
このライブラリを使えば簡単なクイズゲームが作れそうな気がしますね。
ここまで読んでいただき有難う御座いました。

Discussion