カーテンみたいに横から引き出すdiv

はじめに

右側にユーザーが幅変更可能な設定メニュー欄を置くために、見つけたコードを見つけたので、少し改良しました。

参考資料

stack overflow: Resize a div on border drag and drop without adding extra markup

コード

index.html

<div id="right_panel"></div>

style.css

#right_panel {
  position: absolute;
  width: 96px;
  min-width: 50px;
  max-width: 500px;
  height: 100%;
  right: 0;
  background-color: #d4ddff;
  cursor: ew-resize;
}

/* 境界線用 */
#right_panel::after {
  content: '';
  background-color: #ccc;
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: ew-resize;
}

panel.js

const panel = document.getElementById("right_panel");
const BORDER_SIZE = 4; // リサイズ可能な領域の幅
const MIN_WIDTH = 50; // 最小幅
const MAX_WIDTH = 500; // 最大幅

let isResizing = false;
let startX = 0;

panel.addEventListener("mousedown", (e) => {
  if (e.offsetX < BORDER_SIZE) {
    isResizing = true;
    startX = e.clientX;
    document.addEventListener("mousemove", resize);
    document.addEventListener("mouseup", stopResize);
  }
});

function resize(e) {
  if (!isResizing) return;
  const dx = e.clientX - startX;
  startX = e.clientX;
  const newWidth = Math.min(
    Math.max(panel.offsetWidth - dx, MIN_WIDTH),
    MAX_WIDTH
  );
  panel.style.width = `${newWidth}px`;
}

function stopResize() {
  isResizing = false;
  document.removeEventListener("mousemove", resize);
  document.removeEventListener("mouseup", stopResize);
}