[jQuery]ドラッグで要素の幅を変えるUIを作ってみる

はじめに

要素の幅をドラッグして調整できるUI、SlackやNotionなどの様々なサービスでよく見かけますよね。
今回はこれをjQueryで実現してみたいと思います。

作成開始

1. 要素を用意する

まずは、幅を調整したい要素を用意し、ドラッグできるスペースを準備します。
今回は、青い部分を左右にドラッグすることで要素の幅を調整する仕組みを試みます。
(知らなかったのですが、cursor: col-resize;というスタイルを適用すると、カーソルがいかにも「幅を調節できそう」な見た目になります( ͡° ͜ʖ ͡°))

See the Pen prepare_block by miyashu (@miyashu) on CodePen.

2. jQueryで幅を調節する処理を追加する

See the Pen change_block_width by miyashu (@miyashu) on CodePen.

ヌルヌル動いて非常に気持ちいですね。では、実際の処理を見てみましょう。

let isResizing = false;
let startX, startWidth;
const $box = $(".box");
const $drugBar = $(".drug-bar");

$drugBar.on("mousedown", function (e) {
  isResizing = true;
  startX = e.clientX;
  startWidth = $box.width();

  e.preventDefault();
});

$(document).on("mousemove", function (e) {
  if (isResizing) {
    const newWidth = startWidth + (e.clientX - startX);
    $box.css("width", newWidth + "px");
  }
});

$(document).on("mouseup", function () {
  isResizing = false;
});

処理は大きく分けて3つのイベントで行われています。

mousedown: 初期値（startXとstartWidth）を記録し、ドラッグ状態を開始。
mousemove: マウスの移動距離を計算して幅を更新。
mouseup: ドラッグ状態を終了。

ここで重要な役割を果たしているのがclientXというプロパティです。
clientXは、マウスの X 座標（水平位置）を取得するプロパティで、ビューポート内の水平座標を表します。
このプロパティを利用し、マウスの現在位置（clientX）とドラッグ開始位置（startX）の差を計算することで、要素の幅を自在に調整できる仕組みになっています。

最後に

実際に書いてみると案外シンプルな処理だったので驚きました。
このようなUIは、ユーザー自身が要素の大きさを調整できるため、利用状況や画面サイズに応じてレイアウトを最適化できるという大きなメリットがあるので、UIデザインの選択肢として取り入れたいなあと思いました。