I Computer a Life-long Learner

jQuery 实现 modal 可以拖放

2017-11-07

jQuery 实现 modal 可以拖放

添加 jQuery-ui 支持

Gemfile

gem 'jquery-ui-rails'

执行 bundle install ,重启 rails s

application.js

//= require jquery-ui/widgets/draggable

application.scss

*= require jquery-ui/draggable

启用拖放

// application.js

$(document).ready(function() {
  $("#complainModal").find(".modal-dialog").draggable({
      handle: ".modal-header"
  });
}

html.erb

<div class="modal fade modal-draggable message-modal-style" id="complainModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog ui-draggable">
        <div class="modal-content">
            <div class="modal-header ui-draggable-handle">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="complainModalLabel">您对本题有什么想说的?</h4>
            </div>

            <%= render "form" %>
        </div>
    </div>
</div>

Similar Posts

Comments(需要科学上网)