Html jQuery UI Dragable使元素忽略translate3d转换

我试图使我的页面上的某些元素可以拖动。这些元素应用了transform:translate3d（），但在运行时

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

它使元素忽略transform:translate3d（）CSS样式。下面是一个JS小提琴，显示了问题：

橙色框顶部的黄色条不应该是可见的，但是，当使用draggable（）时，它是可见的。我不知道为什么会这样。根据chrome，没有样式被覆盖，但这些类被添加到元素中：

ui-draggable
ui-draggable-handle

---

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

也许您正在寻找类似以下内容： 据我所知，你希望背景留在后面，而不是与拖拽的元素一起移动。 另外，如果你喜欢，你可以改变背景宽度

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

<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。

---

希望这对您有所帮助。

目前，绝对定位的图元相对于变换后的图元进行定位，因为它建立了一个新的局部坐标系（请参见） 而附近的其他父母都没有

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

应用

draggable（）

时，这些条的直接父项

将获得

位置：相对
（建立一个新的坐标系），因此条相对于它们的位置，这就是为什么橙色框的顶部条显示在其顶部（到目前为止，它位于转换的父项顶部）


据我所知，您希望顶部的长方体隐藏其下方的长方体条，这可以通过为这些条提供较低的
z-index
并通过draggable属性设置较高的
z-index
来实现。此属性仅在拖动项目时设置z索引。因此，我们应用于条形图的较低的
z-index
在拖动过程中不会产生影响。一旦我们完成拖动，draggable就会丢失这个较高的z索引，条的较低的z索引就会生效

您可以通过将中的橙色框与蓝色框重叠来测试这一点


$（文档）.ready（函数（）{
$（'.draggable'）.draggable({
zIndex:1
})
});
#容器{
变换样式：保留-3d；
变换：translateY（20px）；
}
.拖拉{
宽度：90px；
高度：90px；
}
img{
宽度：90px；
高度：90px；
转换：translate3d（0,0,50px）
}
.酒吧{
位置：绝对位置；
顶部：-10px；
宽度：90px；
高度：10px；
z指数：-1；
背景颜色：黄色；
转换：translate3d（0,0,25px）
}
#蓝色img{
背景颜色：蓝色；
}
#橙色img{
背景颜色：橙色；
}

事实上不是，我希望盒子可以自己拖动，因为每个盒子都有不同的背景，周围有不同的边缘。这些黄色边缘需要与橙色和蓝色框一起拖动。你看到橙色和蓝色框了吗？它们每个都有一个顶部边缘，用黄色绘制。当这些框相互拖动，并与黄色边缘重叠时，重叠的黄色边缘应消失。如果我可以使用z-index，我会做的是黄色边的z-index为1，蓝色/橙色框的z-index为2。因此，每当蓝色/橙色与黄色重叠时，黄色就会消失。请不要使用内联样式。。。这使得你的代码更加难以使用。这看起来真的很好！我将尝试整合此内容并返回给您。它是有效的，但现在我尝试添加旋转，但我破坏了它：-（.你可以在这里看到：从我读到的内容来看，旋转创建了一个新的堆叠上下文。但是.container已经有了转换样式：preserve-3d，这应该可以让孩子们在.container的堆叠上下文中工作（据我所知）。（PS仍然得到了奖励，因为这不是我最初问题的一部分）@红移Hmmm…不幸的是，如果我们有两个不同的堆叠上下文，我们只能使用
z-index
完全定位它们，我们不能让一个元素跳出它的上下文并在另一个上下文中跳转到另一个元素的下面…所以我所做的不是对整个
应用旋转ely to
.bar
和
：这样它们都有自己的上下文…我们必须调整
.bar
的位置，这样它看起来会粘在
上，但这可能对you@RedShift哦，我忘了提到你应该停止使用内联
style=“
这不是一个好的做法…看到这个了吗