【JavaScript/PC専用】ドラッグアンドドロップ

この記事を書いているのは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)";
});