コンテンツの表示領域をドラッグ&ドロップで変更する

ドラッグ&ドロップで表示領域を自由に変更したい場合、"split.js"を導入する必要がある。

https://split.js.org/

split.js公式ページより引用

また、適用したい箇所ではレイアウトをフレックス、もしくはグリッドで統一する必要があるので、手直しが結構面倒であった。

split.jsを導入するには、"npm install split.js"をターミナルで入力するか、以下のスクリプトタグをHTMLファイルのheadタグ内に設置する。

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.5/split.min.js"
  integrity="sha512-lNjb0qWDVvt1zfSiXufaxtlFtenve3BLbvljxuMXuSr0DE0HYp5OhX0u89uwNd6MvlX1bgJ8ulfG4JMGurs8UA=="
  crossorigin="anonymous"
　　　　referrerpolicy="no-referrer"
></script>

次に、JSファイル内で、以下のコードを記述する。

各パラメーターについては、好きなように設定する。

window.addEventListener("DOMContentLoaded", () => {
  Split(["#split-horizontal-left", "#split-horizontal-right"], {
    direction: "horizontal",
    gutterSize: 8, // Size of the gutter in pixels
    gutterAlign: "center",
    cursor: "col-resize",
  });

  Split(["#split-vertical-left", "#split-vertical-right"], {
    direction: "vertical",
    gutterSize: 8, // Size of the gutter in pixels
    gutterAlign: "center",
    cursor: "row-resize",
  });
});

CSSファイルには、以下の記述を行う。

.gutter-horizontal {
  background-color: #6b7280;
  width: 2px;
  border: solid;
  border-width: 0 3px;
  border-color: rgb(1, 4, 9);
  cursor: grab;
}

.gutter-vertical {
  background-color: #6b7280;
  height: 2px;
  border: solid;
  border-width: 3px 0;
  border-color: rgb(1, 4, 9);
  cursor: grab;
}

最後に、HTMLで任意のタグにidを記述すれば、ドラッグ&ドロップで表示領域を自由に変更出来る。

現時点でsplit.jsにおいて、フレックス・グリッド両方を併用する方法はわからないが、現時点では対応していないのか、書き方が悪いのかはわからない。
もし併用出来れば、より柔軟なレイアウトを実装出来そうな気がする。