Bootstrap 3模态：使其可移动/可拖动而无需jquery-ui

问题描述 投票：3回答：2

我想开发一些东西：

  • 在没有jquery-ui的情况下使引导模态在窗口上可拖动/移动

我使用lobb.js，但我认为这并不重要。在一段代码中，我定义了我的引导程序模式：

<div id="detailsContainer">
<div class="modal fade" id="someId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> Some Title</h4>
        </div>
        <div class="modal-body" id="content">

            <form class="form-horizontal" role="form" id="modalFormBody">
                ... some content
            </form>    

        </div>
        <div class="modal-footer">
            <div class="pull-right" id="modalButtonBar">
                <button type="button" class="btn btn-default control-button" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary control-button" id="addButton">Add</button>
            </div>                  
        </div>
    </div>
</div>

现在，当我尝试使用此代码设置模式可拖动时：

 var $container = $("#detailsContainer");
 $container.on('mousedown', 'div', function() {
            $(this).addClass('draggable').parents().on('mousemove', function(e) {
                $('.draggable').offset({
                    top: e.pageY - $('.draggable').outerHeight() / 2,
                    left: e.pageX - $('.draggable').outerWidth() / 2
                }).on('mouseup', function() {
                    $(this).removeClass('draggable');
                });
            });
            e.preventDefault();
        }).on('mouseup', function() {
            $('.draggable').removeClass('draggable');
        });

行为很奇怪：

  • 当我拿起模态时，模态会超出窗口。我试图修复将某些值更改为顶部和左侧的方法，但是没有任何好处。
  • 当我在模态主体的元素下进行选择时（例如输入文本），那么我可以在模态中将输入文本周围移动。但是我不要这个！我只希望整个模式可以是可拖动/可移动的。

上面的示例在stackoverflow上找到了它（很抱歉，我没有找到它的链接）。我还找到了jquery-ui的一些示例。但我不想使用它。只有Jquery。

我也尝试过：Dialog draggable和JQuery Draggable Demo。但是没有成功。第一个不使我的模式可拖动，而第二个我不明白如何在$ container

中使用它

有人可以帮我吗？

更新

        $('body').on('mousedown', '.modal-dialog', function() {
             $(this).addClass('draggable').parents().on('mousemove', function(e) {
                 $('.draggable').offset({
                     top: e.pageY - $('.draggable').outerHeight() / 2,
                     left: e.pageX - $('.draggable').outerWidth() / 2
                 }).on('mouseup', function() {
                     $(this).removeClass('draggable');
                 });
             });
             e.preventDefault();
         }).on('mouseup', function() {
             $('.draggable').removeClass('draggable');
         });

但是当我想拖动...时，它将改变我拾起模态的位置。它在拐角处。不在那里我拿起它吗？我该如何纠正？将“ .modal-dialog”放在mousedown函数上是错误的吗？如果这是错误的，那么我必须将哪个元素放到那里？

还有另一点：我在模式主体中拥有的元素（例如下拉列表）必须不可拖动。如何排除它们？

javascript jquery html css twitter-bootstrap-3
2个回答
3
投票

请尝试此代码，它将对您有所帮助，下面的代码没有jquery ui

检查此更新的小提琴check here

$(function() {
    $('body').on('mousedown', '#myModal', function(ev) {
        $(this).addClass('draggable').parents().on('mousemove', function(e) {
            $('.draggable').offset({
                top: e.pageY - $('.draggable').outerHeight() /8,
                left: e.pageX - $('.draggable').outerWidth() /8
            }).on('mouseup', function() {
                $(this).removeClass('draggable');
            });
        });
        ev.preventDefault();
    }).on('mouseup', function() {
        $('.draggable').removeClass('draggable');
    });
});
body {padding:50px;}

div {
  cursor:move;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
0
投票

此答案为时已晚，但万一有人（例如我）正在寻找解决方案。最后，我的解决方案是使用以下代码：

(function ($) {
    $.fn.drags = function (opt) {

        opt = $.extend({ handle: "", cursor: "move" }, opt);

        var $el = null;
        if (opt.handle === "") {
            $el = this;
        } else {
            $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
            var $drag = null;
            if (opt.handle === "") {
                $drag = $(this).parents('.modal-dialog').addClass('draggable');
            } else {
                $drag = $(this).parents('.modal-dialog').addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function (e) {
                $('.draggable').offset({
                    top: e.pageY + pos_y - drg_h,
                    left: e.pageX + pos_x - drg_w
                }).on("mouseup", function () {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function () {
            if (opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);

然后，当显示模态时：

            $('#modal').on('shown.bs.modal', function () {
                $(this).find('.card-header').drags();
            });

            $('#modal').modal({ show: true, backdrop: 'static', keyboard: false });

我正在模态对话框中使用带有这样的HTML的卡片：

<div id="modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content  animated bounceInRight">
            <div class="modal-body">
                <div class="card">
                    <div class="card-header border-bottom-0">My super title</div>
                    <div class="card-body">
                        <form >...</form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success" id="btnAlmacenar"><i class="fa fa-save"></i> Almacenar</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close"></i> Cancelar</button>
            </div>
        </div>
    </div>
</div>

这是完整的代码段，如果您想尝试的话：

(function ($) {
        $.fn.drags = function (opt) {
    
            opt = $.extend({ handle: "", cursor: "move" }, opt);
    
            var $el = null;
            if (opt.handle === "") {
                $el = this;
            } else {
                $el = this.find(opt.handle);
            }
    
            return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
                var $drag = null;
                if (opt.handle === "") {
                    $drag = $(this).parents('.modal-dialog').addClass('draggable');
                } else {
                    $drag = $(this).parents('.modal-dialog').addClass('active-handle').parent().addClass('draggable');
                }
                var z_idx = $drag.css('z-index'),
                    drg_h = $drag.outerHeight(),
                    drg_w = $drag.outerWidth(),
                    pos_y = $drag.offset().top + drg_h - e.pageY,
                    pos_x = $drag.offset().left + drg_w - e.pageX;
                $drag.css('z-index', 1000).parents().on("mousemove", function (e) {
                    $('.draggable').offset({
                        top: e.pageY + pos_y - drg_h,
                        left: e.pageX + pos_x - drg_w
                    }).on("mouseup", function () {
                        $(this).removeClass('draggable').css('z-index', z_idx);
                    });
                });
                e.preventDefault(); // disable selection
            }).on("mouseup", function () {
                if (opt.handle === "") {
                    $(this).removeClass('draggable');
                } else {
                    $(this).removeClass('active-handle').parent().removeClass('draggable');
                }
            });
    
        }
    })(jQuery);
    
    $(document).ready(function () {
      $('#modal').on('shown.bs.modal', function () {
                    $(this).find('.card-header').drags();
                });

                $('#modal').modal({ show: true, backdrop: 'static', keyboard: false });
    });
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<div id="modal" class="modal fade">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content  animated bounceInRight">
                <div class="modal-body">
                    <div class="card">
                        <div class="card-header border-bottom-0">My super title</div>
                        <div class="card-body">
                            <form></form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success" id="btnAlmacenar"><i class="fa fa-save"></i> Almacenar</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close"></i> Cancelar</button>
                </div>
            </div>
        </div>
    </div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.