Question

我试图让我页面上的某些元素可以拖动。这些元素有变换：translate3d（）应用于它们，但在运行时

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

它使元素忽略transform：translate3d（）CSS样式。这是一个表示问题的JS小提琴：

https://jsfiddle.net/snbe92ff/

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

ui-draggable
ui-draggable-handle

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

Answer 1

目前，绝对定位的元素相对于变换后的元素定位，因为它建立了一个新的局部坐标系（参见https://www.w3.org/TR/css3-transforms/#transform-rendering）父母所附近的其他人都没有。

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

当您应用draggable()时，这些条形的直接父<div>获得position:relative（建立一个新的坐标系），因此条形相对于它们的位置，这就是橙盒的原因顶部栏出现在它上面（直到现在它位于转换后的父母的顶部）。

根据我的理解，您希望顶部的框隐藏其下方框的栏，这可以通过给出较低的z-index栏并通过{设置高z-index来实现{3}}可拖动的属性。此属性仅在拖动项目时设置z-index 。因此，我们应用于条形的较低z-index在拖动期间不会受到影响。一旦我们完成拖动并且拖动丢失了这个更高的z-index，条形的较低z-index就会生效。

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

$(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>

Answer 2

也许你正在寻找这样的事情：https://jsfiddle.net/rrx3zpdp/ 据我所知，你希望背景留下来，不要随着可拖动的元素移动。附：如果你愿意，你可以改变背景宽度

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

<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。希望这会对你有所帮助。

jQuery UI draggable使元素忽略translate3d transform

2 个答案: