javascript - Bootstrap 模态可调整大小和可拖动

Question

我正在尝试将我的模态转换为可调整大小和可拖动的。我已经尝试过可能的解决方案，例如 jquery 的 .resizable 和 .draggable 函数。

我已经包括

    <script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

对于可调整大小的功能和

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> 

用于可拖动功能。当我使用这两个 .js 脚本进行可拖动时，我的其他 datetimepicker 脚本停止工作

    <link rel="stylesheet" href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
    <script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>.

此外，在那之后，我的模态也不能拖动或调整大小。

/* The Modal (background) */
.his_modal_style {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.his_modal_style-content {
   background-color: #fefefe ;
   margin: auto;
   padding: 20px;
   border: 1px solid #888;
   width: 55%;
   overflow: auto;
}


/* The Close2 Button */
.his_close {
color: #aaaaaa ;
float: right;
font-size: 28px;
font-weight: bold;
}

.his_close:hover,
.his_close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}




 <div id="his_modal" class="his_modal_style">
 <div class="his_modal_style-content">
 <span class="his_close">&times;</span>
 /*Modal content*/

 </div>
 </div>

我试过了

     $('.his_modal_style-content').draggable({
     handle: ".modal-header"
     });
     $('#his_modal_style').draggable({
     handle: ".modal-header"
     });

和

     $('.his_modal_style-content').resizable({
     });
     $('#his_modal_style').resizable({
     });

我期望模态可以拖动和调整大小。

已包含的所有脚本的图像：

标签： javascriptjquerymodal-dialogbootstrap-modal