[jQueryUI sortable]id以外でソート順を取得したい

jQuery sortable を使うと、ブラウザ上での並び替えが直感的におこなうことができます。
以下の例で見てみましょう。

HTML

<div id="sortable">
    <div id="1">りんご</div>
    <div id="2">バナナ</div>
    <div id="3">みかん</div>
</div>

並べ替え操作をおこなったときに発生するイベントの中で、ソート順を取得しDBを更新するときは以下のようなコードを記述します。

jQuery

$('#sortable').sortable({
    update: function( event, ui ) {
        var sortIdArray = $('#sortable').sortable("toArray");
        $.ajax({
            // DBのソート順を更新する処理
        });
    }
});

sortable(“toArray”)によって、並び順で各要素に設定されているidが格納された配列になりますので、それをサーバーにポスト、処理するイメージです。

ただ、個人的には何か処理をするためのDOM要素の属性として、id（およびclass） は使いたくない派です。なのでたいてい下記のようにdata属性で値を設定するようなコーディングをしています。

HTML

<div id="sortable">
    <div data-id="1">りんご</div>
    <div data-id="2">バナナ</div>
    <div data-id="3">みかん</div>
</div>

この場合のsortableの処理として、idではなくdata-idの値を取得するにはどうしたら良いでしょうか。

以下のように記述します。

jQuery

$('#sortable').sortable({
    update: function( event, ui ) {
        var sortIdArray = $('#sortable').sortable("toArray", {attribute: 'data-id'});
        $.ajax({
            // DBのソート順を更新する処理
        });
    }
});

これで、data-id属性値が取得できるようになります。