ui-draggable 在 Chrome 的模态对话框中无法正常工作

Posted 2023-05-08

【中文标题】ui-draggable 在 Chrome 的模态对话框中无法正常工作

【英文标题】：ui-draggable not working properly inside modal-dialog on Chrome

【发布时间】：2017-08-28 19:52:27

【问题描述】：

我有一系列需要可拖动的模态，因此我使用 Bootstrap Modal 和 jQuery UI 可拖动来实现它。

但是，我使用的代码在 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/

【参考方案1】：

我发现了问题，是引导程序.modal.in .modal-dialog 的transform 导致了故障。

要解决此问题，只需将其放入您网站的 css 文件中即可：

.modal.in .modal-dialog 
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;