Bootstrap 3 模態：使其在沒有 jquery-ui 的情況下可移動/可拖動

Question

我正在嘗試開發一些東西：

• 在沒有 jquery-ui 的情況下在窗口上制作引導模式可拖動/可移動

我使用backbone.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函數上是錯誤的？ 如果這是錯誤的，我必須把它放在哪個元素上？

還有一點：我在模態主體（示例下拉菜單）中的元素不能拖動。 我怎樣才能排除它們？

Answer 1

這個答案為時已晚，但以防萬一有人（像我一樣）正在尋找解決方案。 最后，我的解決方案是使用此代碼：

(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>

Answer 2

試試這個代碼肯定會幫助你，下面的代碼沒有 jquery ui

在這里檢查這個更新的小提琴檢查

 $(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>