Angular Material 拖放堆叠的扑克牌并在悬停时自动展开

Question

如何使用 Angular Material 和拖放功能实现以下行为？我希望能够在鼠标悬停时看到卡片完全展开，因此下面的其他卡片只需向下移动其绝对边距顶部，并且仍然能够使用拖放 cdk 重新排列它们。

这些是来自提供此功能的网站的几个示例。我想知道是否可以用 Angular 和 Material 来完成。

我可以使用

position: absolute

和

margin-top: calc(35% * (var(--index)));

将它们堆叠起来，但仍然不知道如何使其中一个悬停在完全高度，同时将其他的向下推。

此外，我的解决方案似乎有点笨拙，因为当存在拖动运动时，它会大量重新计算边距，您可以看到它如何“跳跃”或“交错”很多。但这将是另一个问题。

这是我的示例：https://stackblitz.com/edit/gabkl9-zywnff?file=src%2Fexample%2Fcdk-drag-drop-sorting-example.css

提前致谢。

Answer 1

我们可以使用通用同级选择器（

~

）来偏移其他卡，低于一定高度，这里

130px

，这将给出所需的结果！

.example-box:hover ~ div.example-box {
  margin-top: calc((35% * (var(--index))) + 130px);
}

完整CSS

.example-list {
  width: 200px;
  height: 100%;
  display: block;
  position: relative;
}

.example-box {
  position: absolute;
  height: 200px;
  width: 200px;
  padding: 20px 10px;
  border: solid 1px #ccc;
  box-sizing: border-box;
  cursor: move;
  background: white;
  margin-top: calc(35% * (var(--index)));
}

.example-box:hover ~ div.example-box {
  margin-top: calc((35% * (var(--index))) + 130px);
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Stackblitz 演示