Drag & Drop

[nlatipov]

trafficstars

The Unified Search team is developing a Filter builder component (PR) that will allow you to create a Complex filter capabilities - Support ORs. One of the subtasks is to allow the user to make relationships between filters using drag and drop.

We managed to achieve a very interesting result - we can use the drag and drop (EuiDroppable, EuiDraggable) components in each filter and with the help of the EuiDragDropContext's onDragEnd method we can set the movement between the drop zones.

Demo

https://user-images.githubusercontent.com/34135714/185885779-e4cb62ca-9e3f-4885-b186-ead7d6b69ca0.mov

However, we ran into the problem that when we have this nesting, we can't drag from the last element one level up. The drop zone does not appear under the 5th element.

From which we cannot correctly drag the element, and also if the dragged element is wider than the drop zone, we cannot drag it into this zone.

Demo

https://user-images.githubusercontent.com/34135714/185887047-e152ad2d-d056-4db2-a2af-cbf0efbd07f2.mov

[thompsongl]

Hey @nlatipov

This has come up a few times previously (#3399, #4024), and the problem is that the underlying library that supplies the majority of functionality does not support nested drag contexts: https://github.com/atlassian/react-beautiful-dnd/issues/302

There are some potential workarounds mentioned in the issues I've linked, but there are further accessibility concerns about nested drag contexts that haven't been addressed.

[nlatipov]

@thompsongl thanks a lot for your help. I hope your links will help in our cases

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions[bot]]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.