Twitter Bootstrap Modalを移動(drag)したい
一番手軽に実現できたjQuery UIのdraggableを使います。
1.まずGemfileに追加。
gem 'jquery-ui-rails'
2.bundle install実行。
$ bundle install
3.app/assets/javascripts/application.jsに次の行を追加。
//= require jquery.ui.all
4.実装
view例:
app/view/common/index.html.erb
<a class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="show">Show Modal</a>
<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
loadling...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
myModalのmodal-dialog全体をdraggableにする場合、次の設定を追加します。
app/assets/javascripts/common.js.coffee
$("#myModal").draggable({
handle: ".modal-dialog"
})
modal-body内にスクロールバーがつくような場合は、
さらにその内側のタグをdraggableに設定する方が良いです。
(ブラウザによってはスクロールバーの制御とdraggableの制御が競合し、
例えばスクロールバーをドラッグすると同時にmodalも移動されたりします)