今回は、配置した画像を摘まんでグリグリ自由に動かしてみます。
用意したのは上のpng画像。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="links/rule.css">
</head>
<body>
<img id="draggable-image" src=" images/monster.png"
alt="ドラッグ可能なエイリアンの画像">
<script src="links/script.js"></script>
</body>
</html>
<!-- index.html -->
/* rule.css */
body {
background-color: khaki; /* #f0e68c */
}
#draggable-image {
position: relative;
/* relative 相対位置を指定
absolute 絶対位置を指定 */
cursor: grab; /* ドラッグカーソル */
}
/*cursor: grab;
何かをグラブ (移動のためにドラッグ) できることを示す*/
/* rule.css */
/* script.js */
const image = document.getElementById("draggable-image");
let isDragging = false;
let initialX;
let initialY;
//マウスを画像に近づけると、
//掴みを離した（パー）のカーソルに成るがアクションはない。
image.addEventListener("mousedown", (mm) => {
isDragging = true;
initialX = mm.clientX - image.getBoundingClientRect().left;
initialY = mm.clientY - image.getBoundingClientRect().top;
image.style.cursor = "grabbing"; /* ドラッグ中のカーソル */
});
//マウスカーソルを画像に近づけると、
//掴んでいるような（グー）のカーソルで選択画像をドラッグ可能
//mousedownはマウスが押された状態から移動時に発生するイベント
document.addEventListener("mousemove", (mm) => {
if (!isDragging) return;
const newX = mm.clientX - initialX;
const newY = mm.clientY - initialY;
image.style.left = newX + "px";
image.style.top = newY + "px";
});
//マウスの動作に画像が連動
document.addEventListener("mouseup", () => {
isDragging = false;
image.style.cursor = "grab";
});
//マウスカーソルをプレスして画像から離れると、
//掴みを離した（パー）のカーソルで選択画像を離して終了。
//mouseupはマウスが押された状態から離された時に発生するイベント
/* script.js */
index.htmlをクリックし、表示された画像をクリックするとカーソルにくっ付くので・・・
好きな位置に移動させ、移動位置でクリックすれば位置が確定します。
