Jquery可拖动和可调整大小不能同时工作答案

【问题标题】：Jquery draggable and resizable doesn't work at the same timeJquery可拖动和可调整大小不能同时工作
【发布时间】：2022-01-16 10:09:38
【问题描述】：

我正在尝试将 jquery draggable 和 jquery resizable 用于 bootstrap Modal。但是我在同时执行这两个操作时遇到了问题。例如：如果我只删除 jquery draggable 则 jquery resizable 工作..如果 jquery draggable()存在 jquery resizable() 不起作用。请帮助。下面是我的代码

代码

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

【问题讨论】：

这个是相关的stackoverflow.com/questions/4948582/…

标签： html jquery frontend

【解决方案1】：

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

【讨论】：

非常感谢..这真的很有帮助