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（非推奨）になってる件