Reactでドラッグを無効化するために

去年作成したモグラたたきゲームを使ってみたのですが、、
白熱するとクリックがドラッグ判定になってモグラが叩けないことが判明。

そういえば、Reactでドラッグを無効にする方法を知らないな。と思い調べてみました！！
今後困らないように備忘録として残しておこうと思います。

■Reactでドラッグを無効化するには

まずドラッグ操作を実行された際のイベント検知には、
ondragstartを用いることが出来ます。

例えば今回のモグラたたきの場合、

MakeMap = () =>{
    let List = [];
    for(let i=1;i<=5;i++){
        let buf = [];
        for(let j = 1;j<=5;j++){
            let num = j + (i-1)*5;
            let str = "Mas"+num;
            // 列追加
            buf.push(
                <td><img id={str} src={shibafu} alt="green" onClick={this.onClick.bind(this,str)} /></td>
            );

            let element = document.getElementById(str);
            element.ondragstart = function (){
                    return false;
            };
        }
        // 行追加
        List.push(<tr>{buf}</tr>);
    }
    return List;        
}

というように、特定のID名に対して、

let element = document.getElementById(str);

にてElementを取得した後、

element.ondragstart = function (){
}

にてドラッグ時の処理をコントロールできます。
今回はドラッグを無効化したいので、

element.ondragstart = function (){
         return false;
};

とし、falseが返るようにして無効化としました。

■TypeScriptのケース

次にTypeScriptのケースです。
といってもTypeScriptの場合もほとんど同様です。
先ほどのMakeMap関数を例にご紹介しますと、

    MakeMap = () =>{
        let List = [];
        for(let i=1;i<=5;i++){
            let buf = [];
            for(let j:number = 1;j<=5;j++){
                let num:number = j + (i-1)*5;
                let str:string = "Mas"+num;
                // 列追加
                buf.push(
                    <td><img id={str} src={shibafu} alt="green" onClick={this.onClick.bind(this,str)} /></td>
                );

                let element: HTMLElement | null = document.getElementById(str);
                if(element != null){
                    element.ondragstart = function (){
                        return false;
                    };
                }
            }
            // 行追加
            List.push(<tr>{buf}</tr>);
        }
        return List;        
    }

といった形になります。
TypeScriptの場合、

let element: HTMLElement | null = document.getElementById(str);

の通り、HTMLElement もしくはnullになる型になります。
element.ondragstartはnullを許さない(コンパイル時にエラーになる)ため、

if(element != null){
       element.ondragstart = function (){
               return false;
       };
}

と、elementがnullでない場合に限り、element.ondragstartをコールするようにしました。

■最後に

今回はドラッグを無効化する方法について記載しました。

まだまだWeb作成の技術は初心者です。。
もっと勉強していきたいと思います！！

■参考

https://hakuhin.jp/js/drag_drop.html
https://hajimete.org/jquery-no-save-image