たこぼんげブログ

大学院博士課程から脱落してWEB業界に就職しました。

FireFoxでもjQueryUIのSortableを使う。

jquery

jQueryUIのSortable

お馴染みのjqueryUIプラグインのsortable。 ドラッグ＆ドロップで要素を並び替えできます。
古い記事だけを参考にするとFireFoxでうまく動作しない部分があったのでメモ。

サンプル

jqueryとjquery-uiのscriptは読み込んだ状態で、

<ul id="jquery-ui-sortable">
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
    <li>項目４</li>
    <li>項目５</li>
</ul>

<script>
$(function() {
    $('#jquery-ui-sortable').sortable().bind('click.sortable mousedown.sortable',function(ev){
        ev.target.focus();
    });
});
</script>

と書きます。 もしかしたら.bind以降は不要かも。

失敗パターン1

<script>
$(function() {
    $('#jquery-ui-sortable').sortable();
    $('#jquery-ui-sortable').disableSelection();
});
</script>

disableSelectionはjquery-uiのv1.9で非推奨となっています。 FireFoxでうまく動作しませんでした。 中にFormがあると、inputとかtextareaにFocusできなくなります。

失敗パターン2

<script>
$(function() {
    $('#jquery-ui-sortable').sortable();
    $('#jquery-ui-sortable').disableSelection().delegate('input,textarea','click',function(ev){
        ev.target.focus();
    });
});
</script>

MacのFireFoxではいけましたが、WindowsのFireFoxでうまく動作しませんでした。

参考

上の２つは参考にしましたが、記事が古いですね。