備忘録

jQuery uiのsortableを実行するさい、tableタグを利用するときは以下の注意点がある。

  • tbodyタグが必要
  • ドラッグする要素の幅が小さくなる

【改善点】

tbodyが必要

ドラッグするための項目の親要素につけたクラスもしくはIDに対してsortableを実行するため、trがドラッグ対象となる場合、tableタグにsortableしても、ブラウザによってtbodyタグがない場合自動で挿入する自動補完機能が始まるため、任意でtbodyタグをつける必要がある。

<table>
<tbody class="sortable">// 任意で設定
<tr>
<th>項目</th><td>内容</td>
</tr>
<tr>
<th>項目</th><td>内容</td>
</tr>
<tr>
<th>項目</th><td>内容</td>
</tr>
</tbody>
</table>

ドラッグする要素の幅

表示しているもののwidthを取得してドラッグしている項目に適応するように、オプションを追加する。

$(function(){
    function fixPlaceHolderWidth(event, ui){
        ui.children().each(function(){
            $(this).width($(this).width());
        });
        return ui;
    };

    $('.sortable').sortable({
        start: function(event, ui){
            ui.placeholder.height(ui.helper.outerHeight());
        },
        helper: fixPlaceHolderWidth
    });
});