CODEWITHSUNDEEP
javascriptjquerybootstrap-modaldraggablecontainment
Lior Faigenzon
Lior Faigenzon

Reputation: 23

jQuery Draggable Modal within visible window, set dynamic containment not works when scroll

I have a Bootstrap Modal, which I would like to drag only within the visible window screen(Not let the Modal get out of sight).

My two problems are:

  1. The containment is not set on the first drag, and the Model can get out of the visible window.
  2. The first modal open button to be pressed(Randomly-Not by screen position) the modal is dragged fine and the Containment is working, the second modal open button to be pressed the modal isn't dragged fine and vanishe.

Below is a simple Demo contains a draggable Modal and two buttons to open this modal. one on top and one at bottom.

$(document).ready(function () {
            $('.modal').find('.modal-dialog:first').draggable().css({
                    "position": "absolute",
                    "top": "25%",
                    "left": "37.5%"
                });

            $('.modal').find('.modal-dialog:first').draggable({
                scroll: false,
                //handle: '.modal-header',          
                start: function (e) {
                    const draggable = $(this)[0];
                    const contentResizable = draggable;

                    const paddingHeight = 30;
                    const scrollTop = $(window).scrollTop();
                    const scrollLeft = $(window).scrollLeft();

                    const top = scrollTop - paddingHeight;
                    const right = $(window).width() - contentResizable.offsetWidth;
                    const bottom = scrollTop + $(window).height()- paddingHeight - contentResizable.offsetHeight;

                    $(this).draggable({
                        containment: [scrollLeft, top, scrollLeft + right, bottom]
                    })
                }
            });
     });
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
</head>
<body>
    <div class="container">
        <h2>Modal Example</h2>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Moda</button>
  
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
    
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <button type="button" class="btn btn-info btn-lg" style="position:absolute;top:3500px;left:50px" data-toggle="modal" data-target="#myModal">Open Modal</button>
    </div>
    <script>
        $(document).ready(function () {
            $('.modal').find('.modal-dialog:first').draggable().css({
                "position": "absolute",
                "top": "25%",
                "left": "37.5%"
            });

            $('.modal').find('.modal-dialog:first').draggable({
                scroll: false,          
                start: function (e) {
                    const draggable = $(this)[0];
                    const contentResizable = draggable;

                    const paddingHeight = 30;
                    const scrollTop = $(window).scrollTop();
                    const scrollLeft = $(window).scrollLeft();

                    const top = scrollTop - paddingHeight;
                    const right = $(window).width() - contentResizable.offsetWidth;
                    const bottom = scrollTop + $(window).height()- paddingHeight - contentResizable.offsetHeight;

                    $(this).draggable({
                        containment: [scrollLeft, top, scrollLeft + right, bottom]
                    })
                }
            });
        });
    </script>
</body>
</html>

Upvotes: 1

Views: 534

Answers (0)

Related Questions