Sortableによる並べ替え - cluchのブログ

やりたいこと

ドラッグ＆ドロップで、要素を並べ替えられるようにしたい

＜＜　追加要件　＞＞

並び替えドラッグ時に表示するカーソルを指定したい
移動中の項目を半透明にしたい
移動先のスペースをハイライト表示したい
並び順をクッキーに保存したい

ソース（ベース）

.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="./css/cssFile.css">
<link rel="stylesheet" href="./js/ui/jquery-ui.min.css">
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/jsFile.js"></script>
</head>
<body>
<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>

.js

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

.css

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
#sortable li { 
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    font-size: 1.4em;
    height: 18px;
    font-weight: bold;
}
#sortable li span {
    position: absolute;
    margin-left: -1.3em;
}

追加要件１（並び替えドラッグ時に表示するカーソルを指定したい）

cursorオプションを追加し、カーソルを指定できます。
.js

$( "#sortable" ).sortable({
    cursor: "move",
});

追加要件２（移動中の項目を半透明にしたい）

opacityオプションを指定し、
並び替え時のヘルパーの透明度を0.01～1の数値で指定出来ます。
.js

$( "#sortable" ).sortable({
    opacity: 0.7,
});

追加要件３（移動先のスペースをハイライト表示したい）

プレースホルダのclass名を指定します。
指定が無ければ空白になります。
.js

$( "#sortable" ).sortable({
    placeholder: 'ui-state-highlight',
});

.css

.ui-state-highlight {
    height: 2.2em;
    border: dotted 2px #0000ff;
}

追加要件４（並び順をクッキーに保存したい）

jQueryのcookie プラグインが必要なので入手し、
設定を追加。
.html

<script type="text/javascript" src="./js/cookie/jquery.cookie.js"></script>

順番を保存するために、それぞれにIDを持たせてやる。
.html

<ul id="sortable">
  <li id="sortable-item-1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li id="sortable-item-2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li id="sortable-item-3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
  <li id="sortable-item-4" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li id="sortable-item-5" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
  <li id="sortable-item-6" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li id="sortable-item-7" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

クッキーに保存と、読み込みを行う。
1. updateイベントは、並び替え処理がを停止し、DOMのpositionが変更された際にトリガされます。
2. sortableのtoArrayメソッドで、並び替え要素のidを、Array.joinを使い文字列を格納します。
3. クッキーの処理。

cookie

cookieの保存

$.cookie("KEY", "VALUE", { options });

＜＜　options　＞＞

- expires => 有効期限（日数）
- path => 有効なパス（ドメイン全体で利用したい場合は’/’を設定）
- domain => 有効なドメイン
- secure => HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

cookieの取得

$.cookie("KEY");

4. splitで、分割して配列に格納する。
5. eachで、配列分処理を繰り返す。
6. appendToで要素を末尾に追加していく。

.js

$(function() {
    $("#sortable").sortable( {
        cursor: "move",
        opacity: 0.7,
        placeholder: "ui-state-highlight",
    });
    $("#sortable").disableSelection();
    $("#sortable").sortable( {
        update: function(event, ui) {
            var updateArray = $("#sortable").sortable("toArray").join(",");
            $.cookie("sortable", updateArray, {expires: 1});
        }
    });
    if($.cookie("sortable")) {
        var cookieValue = $.cookie("sortable").split(",");
        $.each(cookieValue, function(index, value){
            $("#" + value).appendTo("#sortable");
        });
    }
});