Twitter Bootstrap のモーダルをドラッグで動かしたいときは


みんな大好き Twitter Bootstrap の話。CSS フレームワークの枠を超え、フロントエンド開発のキングというか、デファクトですね。

数年前のプロジェクトで Blueprint をチョイスした自分がバカみたいに、その後の Bootstrap の大流行。Bootstrap 3 も引き続き人気を博するだろうか。

そんな Bootstrap なんだけど、不満があるとすれば、モーダル(Modals)を動かせないこと! モーダルダイアログがなんでドラッグで動かないんだ!

困ったときはググるでしょ

てことで、bootstrap modal dragとかでググればアッサリ答えにありつける。いつもながら Stack Overflow はすごいなあ、助かるなあと感謝しながらおもむろにページを開く。

Twitter Bootstrap Modal Form: How to drag and drop? – Stack Overflow

答えとしては、jQuery UIDraggable を使えということ。

1
2
3
$("#myModal").draggable({
    handle: ".modal-header"
});

そんだけー。

じゃなかった…。そう言えば、このままだとセレクタ.modal.fade.modal.fade.inに定義されているtoptransitionのプロパティ(モーダルが上から滑り降りてくるトランジション)による影響で、縦方向のドラッグがの〜んびりした動きになって違和感が残る。

なので、上から滑り降りてくるトランジションはあきらめて、class 属性からfadeを消してしまうのがいいと思う。

jQuery UI については、すべての機能はいらないだろうから、Draggable だけとか、必要な機能だけ選択してダウンロードしましょう。

UI Bootstrap と AngularStrap

ちょっと脱線して、AngularJS のことも。

AngularJS と Bootstrap を併用するときは UI Bootstrap か、AngularStrap を使うと、Bootstrap のコンポーネントが AngularJS の directive として定義されているのでとてもラク。自分で記述するコードがすごく少なくなって快適。

ただ、この UI Bootstrap と AngularStrap は、それぞれいいとこも微妙なとこもあるので両方を使いたいと欲張っちゃうこともある。すると今回のメインである Modal でエラーが…。

Modal に限れば UI Bootstrap のほうが優れてるので、AngularStrap の $modal directive コードを削除しちゃいましょう。