jQuery UIでリストのソート機能を実装したときにFirefoxとかでinputのフォーカスがおかしくなる件


jQuery UIでリストのソート機能を実装したときにFirefoxとかでinputのフォーカスがおかしくなる件 | Bamboo lath 日々の記録AngularJsのディレクティブでリストのソート機能を
実装していて困ったのでメモ。

ディレクティブでは実際には「jQuery UI」の「sortable」を
利用していた。

各々のバージョンは以下
jQuery v2.1.3
jQuery UI v1.11.4
AngularJS v1.3.15

実装したコードは以下。

app.directive('mySortable',function(){
    return {
        link:function(scope,el,attrs){
            el.sortable({
                revert: true,
                axis: 'y',
                cancel: "",
                handle: ".sortable-handle"
            });
            
            el.disableSelection().delegate('input,textarea','click',function(ev){
                ev.target.focus();
            });
            
            el.on( "sortdeactivate", function( event, ui ) {
                //ソートした時の挙動
                ・・・
            });
            
        }
    }
})

上記の状態だと「Firefox」と「IE」でソートは出来るのだけどソートする対象内に
あるinputタグにフォーカスが当たるけど全選択(Ctrl+a)とかができないし、
入力値がある場合にもなぜか必ず入力エリアの左側にカーソルが入ってしまう
現象が発生した。

結局以下↓の箇所を

el.disableSelection().delegate('input,textarea','click',function(ev){
    ev.target.focus();
});

【jQuery】sortable()を設定したタグ内のtextarea, inputタグに入力出来ない」このページの内容通りに以下↓のように変更。

el.bind('click.sortable mousedown.sortable',function(ev){
    ev.target.focus();
});

直った。。

jQuery UI の.disableSelection()がdeprecated(非推奨)になってる件

↑これとかの影響なのかな・・・。

■参考URL

【jQuery】sortable()を設定したタグ内のtextarea, inputタグに入力出来ない

Ticket #4429 (closed bug: notabug) Can’t select text in inputs within sortables

jQuery UI の.disableSelection()がdeprecated(非推奨)になってる件

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です