WordPressで横長の表（tableタグなど）をドラッグしてスクロールさせる方法

横長の大きな表（画像など）が画面に収まらない場合に、表をドラッグしてスクロールさせる方法を紹介します。

マウスでスクロールバーをドラッグしてスクロールさせるよりも、表自体をドラッグできた方が操作が簡単で、ユーザーエクスペリエンスも高くなります。

Javascriptを作成して、WordPressに読み込ませ、横長の表や画像をドラッグしてスクロールさせる方法を紹介します。

横長の表（table）をドラッグしてスクロールさせる方法

ドラッグしてスクロールは下記の方法で実現します。

ドラッグスクロールのjsを作成

下記のコードをjsファイルとして保存します。

jQuery.prototype.mousedragscrollable = function () {
    let target;
    $(this).each(function (i, e) {
      $(e).mousedown(function (event) {
        event.preventDefault();
        target = $(e);
        $(e).data({
          down: true,
          move: false,
          x: event.clientX,
          y: event.clientY,
          scrollleft: $(e).scrollLeft(),
          scrolltop: $(e).scrollTop(),
        });
        return false;
      });
      $(e).click(function (event) {
        if ($(e).data("move")) {
          return false;
        }
      });
    });
    $(document)
      .mousemove(function (event) {
        if ($(target).data("down")) {
          event.preventDefault();
          let move_x = $(target).data("x") - event.clientX;
          let move_y = $(target).data("y") - event.clientY;
          if (move_x !== 0 || move_y !== 0) {
            $(target).data("move", true);
          } else {
            return;
          }
          $(target).scrollLeft($(target).data("scrollleft") + move_x);
          $(target).scrollTop($(target).data("scrolltop") + move_y);
          return false;
        }
      })
      .mouseup(function (event) {
        $(target).data("down", false);
        return false;
      });
  };
  $(".drag-scroll").mousedragscrollable();

仮に下記のファイル名で保存します。

WordPressに作成したjsを読み込ませる

functions.phpでフックを書きます。

function add_scripts() {
  //js
  wp_enqueue_script( 'drag-scroll', get_stylesheet_directory_uri(). '/js/drag-scroll.js', array('jquery'), 'v1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );

この例では、子テーマの中にjsフォルダを作成し、その中に先ほど作成したjsファイルを保存して読み込ませています。

classとstyleを追加する

次に、ドラッグスクロールさせたい範囲をdivタグなどで囲い、classで「drag-scroll」を追加し、styleで「overflow-x:auto」と「white-space:nowrap」を追加します。

<div class="drag-scroll" style="overflow-x: auto;white-space: nowrap;">

<!--ここに横長の表などをいれる-->
<table>

</table>

</div>

こうすると、中に囲まれた表がドラッグスクロールできるようになります。

【サンプル】ドラッグスクロール

このページではドラッグスクロールのjsを設定しています。

下記のコードの部分をマウスでドラッグすると、スクロールできるようになっています。

ただし、中のテキストは選択できなくなるので使い方に注意が必要です。