jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えを行えるようにする方法。
実装例（サンプル）
- 項目 1
- 項目 2
- 項目 3
- 項目 4
- 項目 5
- 項目 6
- 項目 7
実装例の動作について
「項目 1」をドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。
同様に、「項目 1」から「項目 7」の項目全て、ドラッグ＆ドロップによる並べ替えが行える。
実装例のソースコード
読み込み
読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.sortable.js"></script>
JavaScript
<script>
<!--
$(function() {
$( '#jquery-ui-sortable' ) . sortable();
$( '#jquery-ui-sortable' ) . disableSelection();
});
// -->
</script>
<!--
$(function() {
$( '#jquery-ui-sortable' ) . sortable();
$( '#jquery-ui-sortable' ) . disableSelection();
});
// -->
</script>
CSS
<style>
<!--
#jquery-ui-sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 70%;
}
#jquery-ui-sortable li {
margin: 0 3px 3px 3px;
padding: 0.3em;
padding-left: 1em;
font-size: 15px;
font-weight: bold;
cursor: move;
}
-->
</style>
<!--
#jquery-ui-sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 70%;
}
#jquery-ui-sortable li {
margin: 0 3px 3px 3px;
padding: 0.3em;
padding-left: 1em;
font-size: 15px;
font-weight: bold;
cursor: move;
}
-->
</style>
HTML
<ul id="jquery-ui-sortable">
<li class="ui-state-default">項目 1</li>
<li class="ui-state-default">項目 2</li>
<li class="ui-state-default">項目 3</li>
<li class="ui-state-default">項目 4</li>
<li class="ui-state-default">項目 5</li>
<li class="ui-state-default">項目 6</li>
<li class="ui-state-default">項目 7</li>
</ul>
<li class="ui-state-default">項目 1</li>
<li class="ui-state-default">項目 2</li>
<li class="ui-state-default">項目 3</li>
<li class="ui-state-default">項目 4</li>
<li class="ui-state-default">項目 5</li>
<li class="ui-state-default">項目 6</li>
<li class="ui-state-default">項目 7</li>
</ul>
オプション
Sortable プラグインには、オプションが多く存在する。私が良く使うのは、下の6つのオプション。
- cursor
-
移動中のカーソルを変更することができるオプション。
- opacity
-
移動中の項目を半透明にできるオプション。
- placeholder
-
移動先のスペースをハイライト表示するオプション。
- connectWith
-
複数のリストの境界を越え、ドラッグ＆ドロップで並べ替えられるようにするオプション。
- handle
-
ドラッグできる部分を指定できるオプション。
- items
-
並べ替える対象となる要素を指定できるオプション。
応用
- 並べ替えた順番を保存・再現
-
並べ替え後の順番をクッキー（cookie）に格納し、次回ページを開いたときに、前回並べ替えた順番で表示させる。
- 並べ替えた順番を送信
-
「この並び順を送信」ボタンを押すと、「この順番でよろしいですか？」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。
- 格子状リストを並べ替え
-
格子（グリッド）状に並べたリストを、ドラッグ＆ドロップで並べ替えられるようにする。
- ドラッグ＆ドロップで新たな項目を並び替えリストへ追加
-
ドラッグ＆ドロップで新たな項目を並び替えられるリストへ追加できるようにする。