Jquery draggable and resizable doesn't work at the same time

I am trying to use jquery draggable and jquery resizable for bootstrap Modal.But I am having issues in doing both at the same time.For example: if I remove jquery draggable only then jquery resizable works..if jquery draggable() is present jquery resizable() doesn't work.Please help.Below is my code

Code

<html>
    <head>
        <title>Modal</title>
        <meta charset="utf-8">
        <link rel="stylesheet" src="jquery-ui.css">
        <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
        <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script>
            
            $( function() {
              $( "#myModal" ).resizable();
            } );
            
            $( function() {
              $( "#myModal" ).draggable();
              handle: ".modal-header"
            } );

        </script>
        <style>
            .modal-content{
                resize: both;
                overflow: auto;
            }
        
        </style>
    </head>
    <body>  
        <h1>Modal Example</h1>
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
            <div class="modal" tabindex="-1" role="dialog" id="myModal">
                <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
                    <div class="modal-body">
                    <p>Modal body text goes here.</p>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
                </div>
        </div>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

Solution 1:

$(function() {
     $( "#myModal" ).resizable();
     $( "#myModal" ).draggable({
        handle: ".modal-header",
    });
});

Jquery draggable and resizable doesn't work at the same time

Solution 1:

Related

Recent Posts