Action buttons to move items within the query tree

[ohyae]

Is your feature request related to a problem? Please describe.
In our project, the rules and groups we use can become quite large, making it difficult to efficiently drag and drop items. Managing groups and moving rules between different groups is especially challenging.

Our queries can get huge, and it gets tricky when the target is off-screen.

Also, we added buttons to collapse and expand groups, but when we try to drag a collapsed group or rule into a collapsed group across the screen, it kinda struggles. The item often ends up dropping into the closest collapsed group, even though we are still dragging it around.

Describe the solution you'd like
It would be helpful to have built-in support for moving items and shift action buttons, similar to how it is handled in react-querybuilder:

Specifically:

Drag-and-Drop Improvements:

• Support for easier movement of groups, rules, and rules between groups.
• Ability to place action buttons alongside the drag icon or before it, ideally in a customizable position.
• It would also be nice to have built-in support to collapse and expand groups

Customizable Drag Icon:

• It would be great if the drag icon could be customized to align with project-specific UI/UX needs.

Current Limitations:

• While actions can be used to move items, it can become complex when transferring rules across groups.
• From what I understand, there’s currently no built-in way to add action buttons for the rules, alongside the delete button, or ahead of the drag icon.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.
Ref: #1145

[ohyae]

Hi @ukrbublik, do you have an estimate on when we can expect this feature? thank you!