cdkDragStartDelay 结束后的角拖放事件答案

【问题标题】：Angular drag and drop event after cdkDragStartDelay endscdkDragStartDelay 结束后的角拖放事件
【发布时间】：2020-03-19 12:23:45
【问题描述】：

cdkDragStartDelay 结束后，我想告诉用户元素已经可以移动了。

只有一个 cdkDragStarted 事件，但它仅在用户已经移动项目后才会触发。

我想显示与 .cdk-drag-preview 相同的样式

有没有我错过的简单方法？

【问题讨论】：

标签： angular drag-and-drop angular-cdk

【解决方案1】：

我也找不到合适的方法。

这是一个想法，但有重要的限制：

<div class="item" cdkDrag [cdkDragStartDelay]="500">...</div>

/* Use the :active pseudo-class */
.item:active {
  /* Apply the same style as your .cdk-drag-preview, for example: */
  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);

  /* Add a transition delay, with the same duration as your cdkDragStartDelay */
  transition-delay: 500ms;
}

关于transition-delay的MDN文档：
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay

这只是一种解决方法，并且存在多个问题。其中：

如果您使用 cdkDragHandle，当句柄变为 :active 时，您将无法将 CSS 规则应用于 cdkDrag 元素，因为 CSS 中没有“父”选择器
如果用户单击/按下元素，然后立即将鼠标/手指移出元素（就像他们在没有等待的情况下拖动一样），:active 样式将打开，尽管元素不可拖动。李>

【讨论】：