Как я могу изменить курсор при перетаскивании?Материал CDK Drag and Drop

Question

Используя поведение Drag and Drop из библиотеки Material CDK, я пытаюсь изменить курсор при перетаскивании элемента cdkDrag.

Например, в this StackBlitz Курсор grab при наведении.Я хотел бы изменить его на grabbing при перетаскивании.Примером этого является то, что происходит при получении строки в Google Sheets:

Чтение документации для стилизации перетаскивания иудалить компонент, похоже, что добавление свойства курсора в этот класс должно помочь:

.cdk-drop-list-dragging: класс, который добавляется в cdkDropList, когда пользователь перетаскивает элемент.

Код выглядит следующим образом:

.example-box {
  /* other CSS properties */
  cursor: grab;
}

.cdk-drop-list-dragging {
  cursor: grabbing;
}

Однако, как вы можете видеть в StackBlitz, кажется, что курсор не меняется.Я предполагаю, что это потому, что этот класс применяется к списку, а не к курсору.

Другим потенциалом был класс .cdk-drag-preview:

.cdk-drag-preview: Thisэто элемент, который будет отображаться рядом с курсором пользователя при перетаскивании элемента в сортируемом списке.По умолчанию элемент выглядит точно так же, как перетаскиваемый элемент.

Кажется, это тоже не работает.Я думаю, это потому, что он изменяет элемент, отображаемый рядом с курсором, а не сам курсор.

Есть идеи, как заставить курсор изменяться при перетаскивании?

Answer 1

Просто используйте onmousedown = "changeCursorPoint()" функцию события -

private changeCursorPoint(): void {
    document.body.style.cursor = 'grabbing';
}

Сбросьте функцию снова при (cdkDropListDropped) = "clearCursorEvent()"

private changeCursorToDefault(): void {
    document.body.style.cursor = 'default';
 }

Answer 2

Просто добавьте cursor: grabbing к example-box:active

.example-box:active {
  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);
  cursor: grabbing;
}

---

: активный селектор используется для выбора и стиля активной ссылки.

Ссылкастановится активным, когда вы нажимаете на него.

Подсказка: Селектор: active можно использовать со всеми элементами, а не только с ссылками.

Дополнительная информация здесь

https://www.w3schools.com/cssref/sel_active.asp

---

Stackblitz

https://stackblitz.com/edit/angular-b8kjj3-r993mc?embed=1&file=app/cdk-drag-drop-overview-example.css