jQuery UI draggable 使元素忽略 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://jsfiddle.net/rrx3zpdp/ 据我了解，您希望背景留在后面而不是随着可拖动的元素移动。 P.S。如果你喜欢你可以改变背景宽度

我从这里删除了两种背景颜色：

<div style="transform-style: preserve-3d">

  <div style="width: 90px; height: 90px;" id="blue" class="draggable">
    <div style="width: 90px; height: 10px; ***background-color: yellow;*** position: absolute; top: -10px; transform: translate3d(0, 0, 25px)"></div>
    <img style="background-color: blue; width: 90px; height: 90px; transform: translate3d(0, 0, 50px)">
  </div>
  <div style="width: 90px; height: 90px;" id="orange" class="draggable">
    <div style="width: 90px; height: 10px; ***background-color: yellow;*** position: absolute; top: -10px; transform: translate3d(0, 0, 25px)"></div>
    <img style="background-color: orange; width: 90px; height: 90px; transform: translate3d(0, 0, 50px)">
  </div>

</div>

并在此处添加一个：

<div style="transform-style: preserve-3d; ***background-color: yellow;***">

您的错误是因为您将背景设置为可拖动的相同 div，只需像我一样将其设置为其他 div。希望对你有帮助。

Answer 2

目前，您的绝对定位元素是相对于转换后的元素定位的，因为它建立了一个新的局部坐标系（参见 https://www.w3.org/TR/css3-transforms/#transform-rendering）和 parent 附近的其他 none 做。

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

定位

在您应用 draggable() 的那一刻，这些柱的直接 parent <div> 得到 position:relative（建立新的坐标系）因此柱相对于它们的位置，这就是为什么橙色框的顶部栏出现在它上面（直到现在它在转换后的 parent 之上）。

根据我的理解，您希望顶部的框隐藏其下方框的栏，这可以通过将栏设置得较低 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>

jQuery UI draggable 使元素忽略 translate3d 变换

jQuery UI draggable makes elements ignore translate3d transform

html

css

jquery-ui

jquery-ui-draggable