カードをドラッグして並び替える方法
カードをドラッグして並び替える方法を紹介します。このサンプルでは、一覧に並んだカードをドラッグして好きな位置へ移動し、表示順を自由に変更できます。タスク管理、商品一覧、コンテンツ一覧、管理画面など、利用者がカードの順番を直接操作できるUIを作りたい場面に利用できます。
HTMLでは6枚のカードを縦方向に配置し、CSSではカードの色やサイズ、余白、角丸、影などを設定しています。JavaScriptではSortableJSを使用して並び替え処理を実装しており、カードをドラッグすると周囲のカードが滑らかに移動しながら、新しい位置へ並び替えられます。また、ドラッグ中はカードの透明度や大きさ、傾きが変化するため、現在操作しているカードを確認しやすくなっています。
カードのタイトル、説明文、背景色、枚数はHTMLから変更できます。CSSではカードの横幅、間隔、余白、角丸、影などを調整でき、JavaScriptでは並び替え時のアニメーション時間や動きを変更できます。カードをドラッグして順番を変更できる一覧UIとして、用途に合わせてカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ドラッグして移動
ドラッグして移動
ドラッグして移動
ドラッグして移動
ドラッグして移動
ドラッグして移動
カードをドラッグして好きな位置へ移動してください。ほかのカードが滑らかに移動しながら、並び順が変更されます。
コードをコピーして使おう！
<!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_list" id="drag-sort-card-list">
<!-- 青カード -->
<div class="drag-sort-card_item" style="background:#2563eb;">
<!-- カード番号 -->
<span>1</span>
<div>
<!-- カードタイトル -->
<div class="drag-sort-card_title">青カード</div>
<!-- カード説明文 -->
<p>ドラッグして移動</p>
</div>
</div>
<!-- 緑カード -->
<div class="drag-sort-card_item" style="background:#16a34a;">
<!-- カード番号 -->
<span>2</span>
<div>
<!-- カードタイトル -->
<div class="drag-sort-card_title">緑カード</div>
<!-- カード説明文 -->
<p>ドラッグして移動</p>
</div>
</div>
<!-- オレンジカード -->
<div class="drag-sort-card_item" style="background:#f97316;">
<!-- カード番号 -->
<span>3</span>
<div>
<!-- カードタイトル -->
<div class="drag-sort-card_title">オレンジカード</div>
<!-- カード説明文 -->
<p>ドラッグして移動</p>
</div>
</div>
<!-- 紫カード -->
<div class="drag-sort-card_item" style="background:#9333ea;">
<!-- カード番号 -->
<span>4</span>
<div>
<!-- カードタイトル -->
<div class="drag-sort-card_title">紫カード</div>
<!-- カード説明文 -->
<p>ドラッグして移動</p>
</div>
</div>
<!-- 赤カード -->
<div class="drag-sort-card_item" style="background:#ef4444;">
<!-- カード番号 -->
<span>5</span>
<div>
<!-- カードタイトル -->
<div class="drag-sort-card_title">赤カード</div>
<!-- カード説明文 -->
<p>ドラッグして移動</p>
</div>
</div>
<!-- 水色カード -->
<div class="drag-sort-card_item" style="background:#0891b2;">
<!-- カード番号 -->
<span>6</span>
<div>
<!-- カードタイトル -->
<div class="drag-sort-card_title">水色カード</div>
<!-- カード説明文 -->
<p>ドラッグして移動</p>
</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>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLでは並び替え対象のカード一覧を作成し、CSSではカードのデザインやドラッグ中の見た目を設定しています。JavaScriptではSortableJSを使用してドラッグ＆ドロップによるカードの並び替えを実装しています。
sample/
├── index.html
├── style.css
└── script.js
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは並び替える6枚のカードとSortableJSの読み込みを記述し、CSSではカード一覧の横幅、間隔、配色、角丸、影、ドラッグ中の見た目などを設定します。JavaScriptではSortableJSを使用して、カードをドラッグして好きな位置へ並び替えられるようにしています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはカード一覧を構成するファイルです。6枚のカードについて、番号、タイトル、説明文、背景色を設定しています。また、ドラッグによる並び替えに使用するSortableJSとscript.jsを読み込みます。カードを追加・削除すると、表示するカードの枚数を変更できます。
style.cssはカード一覧と各カードのデザインを設定するファイルです。カード一覧の最大横幅、カード同士の間隔、内側余白、枠線、角丸、影、文字サイズなどを変更できます。また、.sortable-ghost、.sortable-chosen、.sortable-dragで、移動先、選択中、ドラッグ中のカードの見た目を設定しています。
script.jsはカードをドラッグして並び替える処理を設定するファイルです。drag-sort-card-listをSortableJSの対象として指定し、並び替え時のアニメーション時間や動き、各状態で使用するCSSクラスを設定しています。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。カード一覧が表示されたら、移動したいカードをドラッグし、そのまま別の位置へ動かすことで並び順を変更できます。
このサンプルではSortableJSをCDNから読み込んでいるため、index.htmlに記載しているSortableJSのscript要素も必要です。その下でscript.jsを読み込むことで、SortableJSを利用したカードの並び替え処理が実行されます。
カスタマイズできる内容
index.htmlでは、各カードの番号、「青カード」「緑カード」などのタイトル、「ドラッグして移動」の説明文を変更できます。各.drag-sort-card_itemのbackgroundを変更するとカードごとの背景色を変更でき、同じ構造のカードを追加・削除すると表示する枚数も調整できます。
style.cssでは、カード一覧の最大横幅、カード同士の間隔、カード内側の余白、枠線、角丸、影、番号部分の大きさ、タイトルや説明文の文字サイズを変更できます。さらに、ドラッグ時の透明度、選択中の拡大率、影、ドラッグ中の傾きを変更できます。
script.jsでは、animationで並び替え時のアニメーション時間を変更できます。easingを変更するとカードが移動するときの動きを調整できます。
数値調整
style.css
gap:18px;
カード同士の間隔です。値を大きくするとカード同士が離れ、小さくすると間隔が狭くなります。
max-width:520px;
カード一覧の最大横幅です。値を大きくするとカードが横に広がり、小さくするとコンパクトになります。
gap:16px;
カード内の番号と文章の間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。
padding:18px;
カード内側の余白です。値を大きくするとカード内部の余白が広がり、小さくすると詰まった表示になります。
border:2px solid #dbeafe;
カードの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:18px;
カードの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
width:42px;、height:42px;
カード番号を表示する円の大きさです。両方を同じ値で大きくすると円が大きくなり、小さくするとコンパクトになります。
font-size:20px;
カードタイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
opacity:.25;
ドラッグ時に移動先を示すカードの透明度です。値を小さくするとより薄く表示され、1に近づけると濃く表示されます。
transform:scale(1.03);
選択中のカードの拡大率です。1より大きな値にするとカードが拡大し、1にすると元の大きさになります。
transform:rotate(2deg);
ドラッグ中のカードの傾きです。2degを大きくすると傾きが強くなり、0degにすると傾かなくなります。
script.js
animation:250,
並び替え時のアニメーション時間です。250は0.25秒を表します。値を大きくするとゆっくり、小さくすると速く移動します。
レスポンシブ対応
このサンプルではカード一覧を1列で表示し、max-width:520px;で最大横幅を制限しています。ページ全体には左右20pxの余白を設定しているため、画面幅が狭い場合もカード一覧が利用可能な横幅に合わせて表示されます。スマートフォン・タブレット・PCで利用できます。
sampleフォルダ内に各ファイルを配置し、ブラウザでsample/index.htmlを開くと動作を確認できます。カードのタイトルや内容、色はindex.htmlから変更でき、デザインやレイアウトはstyle.cssで調整できます。また、script.jsではドラッグ時のアニメーション時間や動き方を設定しているため、animationやeasingの値を変更することで好みの操作感へカスタマイズできます。なお、このサンプルではSortableJSを利用しているため、利用時はライブラリの読み込みも必要です。
コメント