formio / angular

JSON powered forms for Angular
https://formio.github.io/angular-demo
MIT License
613 stars 461 forks source link

Intercepting Drag&Drop event #1051

Open Ugurercin opened 3 months ago

Ugurercin commented 3 months ago

Currently working on formio with angular 17. What I'm trying to achieve is that, make sure that I have some sort of a drag-drop validation.

For example; If a user happen to start dragging, lets stay, a 'Panel' component and drop it into another 'Panel' component, I would like to intercept it and not allow to user to do that action. As far as I conclude that, formio is using dragula for managing drag and drop futures.

I have the following HTML side: image

Options is currently empty and default.

On top of this, I went through the event object and manage to find dragula. image

And the dragula instance is as follows; image

First question is, is it possible to intercept and intervene the behavior of drag and drop in such way ? If yes, how may I achieve this goal.

Example: Following screenshot has 2 panel components. As the 2nd panel component dropped in the first component, I would like to get the event(addComponent) and check if the parent component is a panel component as well, if yes, I would like to prevent the user to perform this addComponent event and revert it.

image

Any help would be appreciated, thank you in advance.