jQuery Sortableで複数選択ドラッグを実現 - 要素を簡単に並び替えよう
Webサイトで、ユーザーが複数のアイテムを自由にドラッグ＆ドロップして並び替えられるようにしたいと思ったことはありませんか？ jQuery UIのSortableは、まさにそれを実現するための強力なツールです。この記事では、Sortableを使って複数選択ドラッグを実装する方法を、ステップバイステップで解説していきます。
1. jQuery Sortableとは
jQuery Sortableは、jQuery UIライブラリに含まれるプラグインの一つです。リスト要素をドラッグ＆ドロップで動的に並び替えられるようにする機能を提供します。直感的な操作でリストの順番を変更できるため、ユーザーフレンドリーなインターフェースを実現できます。
Sortableは、リストの並び替えだけでなく、アイテムの移動、入れ替え、削除など、様々な操作を柔軟に実装できます。そのため、タスク管理ツール、ショッピングカート、画像ギャラリーなど、幅広いWebアプリケーションで活用されています。
2. jQuery Sortableで複数選択機能を実装する
Sortableの基本的な使い方は非常にシンプルですが、複数選択ドラッグを実装するには、いくつかの追加設定が必要です。具体的な手順は以下の通りです。
2.1 必要なファイルを読み込む
jQuery UI Sortableを使用するには、jQueryとjQuery UIのライブラリをHTMLファイルに読み込む必要があります。以下のCDNリンクを使用するのが簡単です。
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
2.2 HTML構造
次に、Sortableを適用するHTML要素を記述します。ここでは、シンプルなリスト構造を例に挙げます。
<ul id="sortable">
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
<li>アイテム 4</li>
<li>アイテム 5</li>
</ul>
2.3 JavaScriptコード
最後に、JavaScriptでSortableを初期化し、複数選択ドラッグの機能を追加します。
<script>
$(function() {
// Sortableを初期化
$("#sortable").sortable({
// 複数選択時に適用するクラス名
selectedClass: "ui-selected"
});
// Sortableのplaceholderのスタイルを設定
$("#sortable").sortable("option", "placeholder", {
classes: {
"ui-placeholder": "placeholder"
}
});
// リストアイテムのクリックイベントを設定
$("#sortable li").on("mousedown", function(e) {
// CtrlキーまたはCommandキーを押しながらクリックした場合
if (e.ctrlKey || e.metaKey) {
// クリックしたアイテムの選択状態を反転
$(this).toggleClass("ui-selected");
} else {
// クリックしたアイテム以外を選択解除
$("#sortable li").removeClass("ui-selected");
// クリックしたアイテムを選択
$(this).addClass("ui-selected");
}
});
});
</script>
3. コード例
上記のコードをまとめた、動作するサンプルコードは以下の通りです。このコードをHTMLファイルにコピー＆ペーストして、ブラウザで開くと、複数選択ドラッグの動作を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Sortable 複数選択ドラッグ</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<style>
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
}
#sortable li {
margin: 5px;
padding: 5px;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: move;
}
.ui-selected {
background-color: #90EE90;
}
.placeholder {
background-color: #FFFFE0;
border: 1px dashed #ccc;
}
</style>
</head>
<body>
<ul id="sortable">
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
<li>アイテム 4</li>
<li>アイテム 5</li>
</ul>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$(function() {
$("#sortable").sortable({
selectedClass: "ui-selected"
});
$("#sortable").sortable("option", "placeholder", {
classes: {
"ui-placeholder": "placeholder"
}
});
$("#sortable li").on("mousedown", function(e) {
if (e.ctrlKey || e.metaKey) {
$(this).toggleClass("ui-selected");
} else {
$("#sortable li").removeClass("ui-selected");
$(this).addClass("ui-selected");
}
});
});
</script>
</body>
</html>
4. よくある質問
4.1 選択された要素を取得するにはどうすればよいですか？
$('.ui-selected')セレクターを使用すると、選択されているすべての要素を取得できます。たとえば、選択された要素のテキストを取得するには、次のように記述します。
var selectedItems = $('.ui-selected').map(function() {
return $(this).text();
}).get();
console.log(selectedItems); // 選択された要素のテキストの配列
4.2 ドラッグ後にカスタム操作を実行するにはどうすればよいですか？
updateイベントを使用すると、ソートが完了した後にカスタムのJavaScript関数を実行できます。たとえば、ソートが完了した後に選択された要素のテキストをコンソールに出力するには、次のように記述します。
$("#sortable").sortable({
// ... その他の設定 ...
update: function(event, ui) {
var selectedItems = $('.ui-selected').map(function() {
return $(this).text();
}).get();
console.log("選択されたアイテム:", selectedItems);
}
});
5. まとめ
この記事では、jQuery UI Sortableを用いて、Webページに複数選択ドラッグの機能を実装する方法を解説しました。Sortableは、直感的な操作でリスト要素を並び替えられるようにする、非常に便利なプラグインです。今回紹介したコードを参考に、ぜひご自身のWebサイトに実装してみてください！
その他の参考記事:jquery ui selectable table