html - jQuery UI 可拖动使元素忽略 translate3d 变换

Question

我正在尝试使我页面上的某些元素可拖动。这些元素应用了 transform: translate3d()，但是在运行时

$(".draggable").draggable();

它使元素忽略 transform: translate3d() CSS 样式。这是一个显示问题的 JS fiddle :

https://jsfiddle.net/snbe92ff/

橙色框顶部的黄色条不应该是可见的，但是，当使用 draggable() 时，它是可见的。我不确定为什么会这样。根据 chrome 的说法，没有样式被覆盖，但是这些类被添加到元素中:

ui-draggable
ui-draggable-handle

查看 jQuery 源代码，那里也没有发生转换。那么为什么在执行 draggable() 时会忽略 transform: translate3d()，我该如何修复它？

Answer 1

此时，您的绝对定位元素相对于转换后的元素定位，因为它建立了一个新的局部坐标系(参见 https://www.w3.org/TR/css3-transforms/#transform-rendering) parent 附近的其他人都没有。

与您想象的不同，橙色条顶部的黄色条并没有被重叠的蓝色条隐藏。它在橙色条的顶部不可见，因为所有黄色条实际上都位于蓝色条的顶部，因为它们相对于转换后的父项定位。

申请的那一刻draggable() , 直接父级 <div>这些酒吧获得 position:relative (建立一个新的坐标系)因此条形图相对于它们定位，这就是为什么橙色框的顶部条形图出现在它的顶部(直到现在它位于转换后的父级上方)。

---

据我了解，您希望顶部的框隐藏其下方框的栏，这可以通过将栏设置得较低来实现 z-index并设置一个高 z-index通过 zIndex 可拖动的属性。此属性仅在元素被拖动时设置 z-index。因此较低的z-index我们应用于条形图不会在拖动过程中产生影响。一旦我们完成拖动并且 draggable 失去这个较高的 z-index，栏的较低 z-index 就会生效。

您可以通过将 demo 中的橙色框与蓝色框重叠来进行测试.

$(document).ready(function() {
  $('.draggable').draggable({
    zIndex: 1
  })
});

#container {
  transform-style: preserve-3d;
  transform: translateY(20px);
}
.draggable {
  width: 90px;
  height: 90px;
}
img {
  width: 90px;
  height: 90px;
  transform: translate3d(0, 0, 50px)
}
.bar {
  position: absolute;
  top: -10px;
  width: 90px;
  height: 10px;
  z-index: -1;
  background-color: yellow;
  transform: translate3d(0, 0, 25px)
}
#blue img {
  background-color: blue;
}
#orange img {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="container">
  <div id="blue" class="draggable">
    <div class="bar"></div>
    <img>
  </div>
  <div id="orange" class="draggable">
    <div class="bar"></div>
    <img>
  </div>
</div>