【CSS】ユーザーに入り組んだ細々としたモノを比較的快適にドラッグアンドドロップしてもらうためのCSS

　画面のサイズは無限ではありません。このため表示したいものや操作したいものが増えてきて、それを一画面に押し込めようとするとどうしてもごちゃごちゃしてしまいます。この記事ではごちゃごちゃした状態でも比較的操作性、視認性を犠牲にしないための CSS の一例を紹介します。

　紹介するのはごちゃごちゃした中でも狙った対象をドラッグアンドドロップしてもらうためのCSSです。具体的には次です。

        /* マウスカーソルが上に来た時に大きくデザインを変えることで、今からどれを操作するのか見やすくする */
        .draggable-line {
            /* border を入れておかないと hover した時にサイズが変わる */
            border: solid 3px rgba(0,0,0,0);
        }
        .draggable-line:hover {
            /*  hover した時に目立つようにする*/
            border: solid 3px #ff0000bb;
        }

        /* 操作対象になることのない要素はクリックやドラッグといったイベントを一切発生させなくする */
        /* 操作対象になることのない要素が操作対象になりうる要素の上に来ても、操作を邪魔しなくなる */
        /* @see　https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events　*/
        .no-action-line {
            pointer-events: none;
        }

　コメントの説明の通りです。前半部の :hoverとborder ではマウスカーソルの下にある要素、つまりこれからクリックやドラッグした時に操作対象となる要素のみに縁取りをつけることで目立たせています。後半部の pointer-events:noneでは操作対象に対する操作が他要素で邪魔されないために、そもそもイベントを発生させなくしています。pointer-events の詳しい挙動は次リンクの MDN が詳しいです。といっても細かい制御が可能なのは SVG ぐらいで普通の HTML 要素はON/OFFぐらいしかできません。

pointer-events – CSS： カスケーディングスタイルシート ｜ MDN

　このCSSを使ったデモが次です。青い棒をドラッグアンドドロップで動かせます。上記CSSの様な補助のおかげで操作対象がわかりやすくなり、他要素へのミスクリックなどで操作を邪魔されることもなくなっています。