In @tuleap/drag-and-drop, when a DropGhost is created, the dragged element is deeply cloned using element.cloneNode(true).
The goal is to create an element having the exact same height as the moved element in order to better visualize where the element could be moved and how much space it will take there.
However, this way of proceeding has several flaws:
- Performance-wise, it's not really good considering we are cloning an entire sub-structure of the document. We don't really care about the content, we care only about its size.
- When the element contains custom-elements such as
@tuleap/plugin-tracker-link-field, numerous errors end up displayed in the web-console because the controller attached to the link-field has not been cloned in the process.
Instead, we could do the following:
- Create an element whose tagname matches the dragged element's tagname (e.g I've dragged a
<li/> element, the DropGhost will be a <li/> element.
- Assign the DropGost the
drek-ghost class as well as all the dragged element's classes (except drek-hide).
- Set the DropGhost's height based on the dragged element's dimensions computed by
getBoundingClientRect() so it will have the exact same dimensions (CSS classes assigned from the original element are expected to properly set the ghost's width).
Note: assigning the attributes of the dragged element to the ghost may also be needed since they can hold essential information for the vue apps functioning (data-v-xxxxx, data-test etc.).
We would then have a perfectly sized DropGhost fitting perfectly in the HTML structure it's inserted in.