Some problems with drag and drop functionality

[PKulkoRaccoonGang]

In the current implementation of the Course outline page, we have the previously added drag-and-drop functionality for sections, sub-sections, and course units. Technically, this functionality is based on two @edx/frontend-lib-content-components repository components: SortableItem and DraggableList.

Screen.Recording.2024-02-22.at.12.25.41.mov

In the video attached below you can notice problems with the visual display of the dragged component, specifically:

1. Floating position of the "Drag to reorder" tooltip. The tooltip is displayed during hover (or focus on draggable button)
2. Available to drag an element beyond the boundaries of the page container (under or above neighboring elements)
3. Visual distortion of the dragged element
4. There is no high level of z-index (the dragged element may be hidden under other elements on the page)

The drag-and-drop functionality is now being used for the new Сourse unit page (under development). It makes sense to carry out optimizations and corrections in @edx/frontend-lib-content-components to improve performance and user experience for the Course outline and Course unit pages of the current repository frontend-app-course-authoring

[navinkarkera]

I am working on fixing it, will post details later on.

[navinkarkera]

Should be fixed by #859.

The drag-and-drop functionality is now being used for the new Сourse unit page (under development). It makes sense to carry out optimizations and corrections in @edx/frontend-lib-content-components to improve performance and user experience for the Course outline and Course unit pages of the current repository frontend-app-course-authoring

We cannot really use generic dragging components from frontend-lib-content-components as here blocks need to move across different parent blocks which requires a lot of custom functionality as seen in #859 .