0
我有一個需要拖動的模式級聯，所以我使用Bootstrap Modal和jQuery UI可拖動來實現它。ui-draggable在Chrome上的模式對話框中無法正常工作
但是，我使用的代碼適用於Internet Explorer和Firefox，但在Chrome中，當您嘗試拖動它時，內部模式會得到一個不好的偏移量。
此外調試使我與modal-dialog使用position: fixed和jQuery UI可拖動的使用正數，數值top/left，從而改變內模態的位置不正確的事實連接錯誤。
但仍然，由jQuery UI draggable生成的top/left的值對於所有瀏覽器都是相同的，但只是Chrome將它定位錯了。
代碼：
$('#Cad_Expen').draggable(
{
handle: '#Expen > .mod-header',
containment: 'window'
});
$('#Cad_Point').draggable(
{
handle: '#Point > .mod-header',
containment: 'window'
});#Cad_Expen {
width: 800px;
height: 500px;
left: calc(50% - 400px);
top: calc(50% - 250px);
}
#Cad_Point {
width: 600px;
height: 300px;
left: calc(50% - 300px);
top: calc(50% - 150px);
}
.modal-dialog {
width: 100%;
height: 100%;
margin: 0;
}
.modal {
overflow: visible !important;
}
/* irrelevant CSS */
.mod-header {
height: 30px;
background-color: #DBDBDB;
}
.mod-expen-body, .mod-point-body {
background-color: #F7F7F7;
border: 1px solid #DBDBDB;
}
.mod-expen-body {
height: 500px;
}
.mod-point-body {
height: 300px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="Cad_Expen" class="modal fade in" style="display: block;">
<div id="Expen" class="modal-dialog">
<div class="mod-header"></div>
<div class="mod-expen-body"></div>
<div id="Cad_Point" class="modal fade in" style="display: block;">
<div id="Point" class="modal-dialog">
<div class="mod-header"></div>
<div class="mod-point-body"></div>
</div>
</div>
</div>
</div>你也可以找到它的CodePen：
http://codepen.io/carvalho23lucas/full/jBJbLy/