BootstrapのList Group をドラッグで順番を入れ替えられるようにする

概要

こちらの記事で作成したBootstrapのList Groupの要素をドラッグで順番を入れ替えられるようにします。BootstrapのList GroupでもQuery UI を利用したSortableによりドラッグでの順番入れ替えができます。

プログラム

事前準備

こちらの記事で作成したコードを準備します。また、jQuery.UIのJS,CSSファイルをルートディレクトリ直下の Scripts ディレクトリ内に配置します。

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="../Content/bootstrap.css" />
  <script src="../Scripts/jquery-3.0.0.js"></script>
  <script src="../Scripts/jquery-ui.js"></script>
  <script src="../Scripts/bootstrap.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#list01').sortable();
    });
  </script>
</head>
<body>
  <ul id="list01" class="list-group">
    <li class="list-group-item">ぺんぎんクッキー</li>
    <li class="list-group-item">らくだキャラメル</li>
    <li class="list-group-item">しろくまアイス</li>
    <li class="list-group-item">あひるケーキ</li>
    <li class="list-group-item">ふくろうサブレ</li>
  </ul>
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
BootstrapのList Group をドラッグで順番を入れ替えられるようにする:画像1

リストの2つ目の[らくだキャラメル]の項目をクリックしてドラッグします。ドラッグにより項目が移動します。

ドラッグすることで挿入位置を決められます。
BootstrapのList Group をドラッグで順番を入れ替えられるようにする:画像3

ドロップすると位置が確定され、順番の変更ができます。

他の項目もドラッグで順番の変更ができ、項目の並び替えができます。