この記事を書いているのは2024年2月2日ですが、冬も半ばを過ぎ、
暖冬傾向が顕著になっているようです。
2024年1月の平均気温は横手市が1.1℃で、最高記録タイ、
湯沢市が0.9℃で、2020年の0.5℃の記録を更新しました。
関東の方でも野菜が豊作なようで、悲しいニュースも多い中、
心が温まる話です。
さて、JavaScriptは学びが尽きず、
今回は新たなイベントリスナーおよびメソッドを使います。
「マウスによるドラッグアンドドロップ」に反応するJavaScriptの試作です。
作ったもの
HTML
<div class="point" draggable="true"></div>
CSS
.point {
width: 100px;
height: 100px;
background-color: red;
transition: transform .4s;
}
JavaScript
const point = document.querySelector(".point");
let relative_x;
let window_w = window.innerWidth;
point.addEventListener("dragstart",function(event){
relative_x = event.clientX - point.getBoundingClientRect().left;
/* 要素左からの相対位置 */
});
window.addEventListener("resize", function () {
window_w = window.innerWidth;
point.style.transform = "translateX(0px)";
/* リサイズされるとホームポジションに戻る */
});
window.addEventListener("dragover", (event) => {
event.preventDefault();
/* ドラッグアンドドロップにおけるデフォルトの挙動の阻止 */
});
window.addEventListener("drop", (event) => {
event.preventDefault();
let x_position = event.clientX;
x_position -= relative_x;
/* マウスの左位置-要素左からの相対位置 */
if (x_position > 600) {
x_position = 600;
/* 今回の可動域は600pxとします。 */
}else if(x_position < 0){
x_position = 0;
}
/* 左右にはみ出さないように調整 */
point.style.transform = "translateX(" + x_position + "px)";
});