Does cdkDrag suppress native drag and drop events?

What are you trying to do?

Use native drag and drop events such as dragstart, dragenter and dragexit in conjunction with cdkDrag. Without these it’s hard to build richer behaviours in as well as things like visually highlighting the drop zone.

What troubleshooting steps have you tried?

I have tried attaching these events to both the container list and the individual draggable list items but they don’t seem to fire.

Reproduction

https://components-issue-un5pqw.stackblitz.io

Steps to reproduce:

1. Go to the stackblitz
2. Try dragging items in the list
3. Notice that the ondragstart event doesn’t fire
4. Try adding other native drag events and see whether they work - I can’t seem to make them do so

Environment

• Angular: 12.2.9
• CDK/Material: 12.2.9

[crisbeto]

Yes, if you want free dragging (e.g. like a shortcut on your desktop), you should use cdkDrag without cdkDropList.

[crisbeto]

how would one fire events on other elements? Just treat them as single item lists? I’m not sure what you mean by this. The events are fired by the CDK module, not the consumer.

As for terminology, the two main directives are:

1. cdkDrag - an element that can be dragged. If it’s inside a cdkDropList, it’ll be treated as a part of the list, otherwise it can be dragged around freely.
2. cdkDropList - a list that allows for cdkDrag items to be sorted. Lists can be connected in order to allow items to be transferred. cdkDropList is similar to jQuery UI sortable.

There are some other directives that supplement the two above. See the docs: https://material.angular.io/cdk/drag-drop/overview