ドラッグ＆ドロップでカードを並び替える方法【HTML/CSS/JavaScript・サンプルコード付き】

ドラッグ＆ドロップでカードを並び替える方法

ドラッグ＆ドロップでカードを並び替える方法を紹介します。カードをマウスでドラッグし、そのまま好きな位置へ移動するだけで並び順を変更できるサンプルです。タスク管理、商品一覧、画像ギャラリー、ダッシュボードなど、カードの順番を自由に変更したい場面で利用できます。

このサンプルでは、HTMLでカード一覧を作成し、CSSでカードのデザインやドラッグ中の見た目を設定しています。JavaScriptではSortableJSを使用してドラッグ＆ドロップによる並び替えを実装しており、カードを移動すると周囲のカードも滑らかに移動するため、自然な操作感を実現できます。

カードのタイトルや内容、色、サイズ、枚数は自由に変更できます。また、並び替え後の順番を保存する処理を追加すれば、タスク管理や管理画面など実用的な機能としても利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

青カード

ドラッグして移動

緑カード

ドラッグして移動

オレンジカード

ドラッグして移動

紫カード

ドラッグして移動

赤カード

ドラッグして移動

水色カード

ドラッグして移動

このデモではカードをドラッグすると、ほかのカードが滑らかに移動しながら並び順を変更できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>ドラッグ＆ドロップでカードを並び替える方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- カード並び替えエリア -->
  <div class="drag-sort-card_demo">

    <!-- 並び替えできるカード一覧 -->
    <div class="drag-sort-card_list" id="drag-sort-card-list">

      <div class="drag-sort-card_item" style="background:#2563eb;">
        <span>1</span>
        <div>
          <h3>青カード</h3>
          <p>ドラッグして移動</p>
        </div>
      </div>

      <div class="drag-sort-card_item" style="background:#16a34a;">
        <span>2</span>
        <div>
          <h3>緑カード</h3>
          <p>ドラッグして移動</p>
        </div>
      </div>

      <div class="drag-sort-card_item" style="background:#f97316;">
        <span>3</span>
        <div>
          <h3>オレンジカード</h3>
          <p>ドラッグして移動</p>
        </div>
      </div>

      <div class="drag-sort-card_item" style="background:#9333ea;">
        <span>4</span>
        <div>
          <h3>紫カード</h3>
          <p>ドラッグして移動</p>
        </div>
      </div>

      <div class="drag-sort-card_item" style="background:#ef4444;">
        <span>5</span>
        <div>
          <h3>赤カード</h3>
          <p>ドラッグして移動</p>
        </div>
      </div>

      <div class="drag-sort-card_item" style="background:#0891b2;">
        <span>6</span>
        <div>
          <h3>水色カード</h3>
          <p>ドラッグして移動</p>
        </div>
      </div>

    </div>

  </div>

  <!-- SortableJSを読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
}

/* カード並び替えエリア */
.drag-sort-card_demo{
  padding:40px 20px;  /* 外側余白 */
  background:#f8fbff;  /* 背景色 */
  border-radius:18px;  /* 角丸 */
}

/* 並び替えできるカード一覧 */
.drag-sort-card_list{
  display:grid;  /* グリッド表示 */
  grid-template-columns:1fr;  /* 1列表示 */
  gap:18px;  /* カード同士の間隔 */
  max-width:520px;  /* 一覧の最大横幅 */
  margin:0 auto;  /* 中央寄せ */
}

/* カード */
.drag-sort-card_item{
  display:flex;  /* 番号と本文を横並び */
  align-items:center;  /* 縦方向中央寄せ */
  gap:16px;  /* 番号と本文の間隔 */
  padding:18px;  /* 内側余白 */
  border:2px solid #dbeafe;  /* 枠線 */
  border-radius:18px;  /* 角丸 */
  color:#ffffff;  /* 文字色 */
  font-weight:700;  /* 文字の太さ */
  cursor:move;  /* 移動できるカーソル */
  user-select:none;  /* ドラッグ中の文字選択を防ぐ */
  box-shadow:0 12px 30px rgba(15,23,42,.08);  /* 影 */
}

/* カード番号 */
.drag-sort-card_item span{
  display:grid;  /* 中央配置 */
  place-items:center;  /* 縦横中央寄せ */
  width:42px;  /* 番号の横幅 */
  height:42px;  /* 番号の高さ */
  border-radius:50%;  /* 丸型 */
  background:rgba(255,255,255,.25);  /* 背景色 */
  font-size:18px;  /* 文字サイズ */
  font-weight:900;  /* 文字の太さ */
  flex-shrink:0;  /* 番号を縮めない */
}

/* カードタイトル */
.drag-sort-card_item h3{
  margin:0 0 4px;  /* 下余白 */
  font-size:20px;  /* 文字サイズ */
}

/* カード説明文 */
.drag-sort-card_item p{
  margin:0;  /* 外側余白 */
  font-size:14px;  /* 文字サイズ */
  line-height:1.6;  /* 行間 */
}

/* ドラッグ中に元位置へ残る薄いカード */
.sortable-ghost{
  opacity:.25;  /* 透明度 */
}

/* 選択中のカード */
.sortable-chosen{
  transform:scale(1.03);  /* 少し拡大 */
  box-shadow:0 18px 40px rgba(15,23,42,.2);  /* 影を強くする */
}

/* 実際にドラッグしているカード */
.sortable-drag{
  transform:rotate(2deg);  /* 少し傾ける */
}

// 並び替え対象のカード一覧を取得
const dragSortCardList = document.getElementById("drag-sort-card-list");

// SortableJSでドラッグ＆ドロップ並び替えを有効化
new Sortable(dragSortCardList,{

  // 並び替え時のアニメーション時間
  animation:250,

  // アニメーションの動き方
  easing:"cubic-bezier(.25,.8,.25,1)",

  // ドラッグ中に元の位置へ表示される要素のクラス
  ghostClass:"sortable-ghost",

  // 選択中のカードに付くクラス
  chosenClass:"sortable-chosen",

  // 実際にドラッグしているカードに付くクラス
  dragClass:"sortable-drag"

});

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLでは並び替え対象のカード一覧を作成し、CSSではカードのデザインやドラッグ中の見た目を設定しています。JavaScriptではSortableJSを使用してドラッグ＆ドロップによるカードの並び替えを実装しています。

sample/
├── index.html
├── style.css
└── script.js

sampleフォルダ内に各ファイルを配置し、ブラウザでsample/index.htmlを開くと動作を確認できます。カードのタイトルや内容、色はindex.htmlから変更でき、デザインやレイアウトはstyle.cssで調整できます。また、script.jsではドラッグ時のアニメーション時間や動き方を設定しているため、animationやeasingの値を変更することで好みの操作感へカスタマイズできます。なお、このサンプルではSortableJSを利用しているため、利用時はライブラリの読み込みも必要です。