Javascript Angular material 拖放堆叠的牌副，悬停时自动展开&

发布于04月02日

如何使用Angular material 和拖放功能实现以下行为？&我希望能够看到卡完全展开鼠标，所以下面的其他卡只是向下移动他们的绝对边缘顶部，仍然能够重新安排他们使用拖放cdk.&

这些是一个提供此功能的网站的几个例子.我想知道它是否可以用Angular和Materials来完成.

我能够堆叠他们使用position: absolute和margin-top: calc(35% * (var(--index)));他们，但仍然不知道如何使一个悬停满高，而推动下面的其他人下来.

此外，我的解决方案似乎有点笨拙，因为它重新计算利润很多时，有一个拖动运动，你可以看到它是如何" skip "或"停滞"很多.不过，这将是另一个问题.

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

先谢谢你.

推荐答案

我们可以使用general sibling selector (~)来抵消其他卡，低于一个高度，这里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 Demo