Action buttons to move items within the query tree

[ghost]

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.

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.

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.

Question:
Is there a way to achieve this using the current features? Any guidance or suggestions would be greatly appreciated.

[ukrbublik]

Nice feature request.
Please create an issue.
I was also thinking of ability to collapse groups to make drag-n-drop easier

[ukrbublik]

Managing groups and moving rules between different groups is especially challenging

Can you please explain why?
Is it challenging if target group is out of screen bounds? Or other reasons?

[ghost]

I will! Thank you! And yes, a build-in support to collapse group will be helpful.

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

Also, I added buttons to collapse and expand groups, but when I 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 I’m still dragging it around.

[ghost]

created the issue: #1146