function createDraggedElementFrom(originalElement) {
    const rect = originalElement.getBoundingClientRect();
    const draggedEl = originalElement.cloneNode(true);
    copyStylesFromTo(originalElement, draggedEl);
    draggedEl.id = `dnd-action-dragged-el`;
    draggedEl.style.position = "fixed";
    draggedEl.style.top = `${rect.top}px`;
    draggedEl.style.left = `${rect.left}px`;
    draggedEl.style.margin = "0";
    // we can't have relative or automatic height and width or it will break the illusion
    draggedEl.style.boxSizing = "border-box";
    draggedEl.style.height = `${rect.height}px`;
    draggedEl.style.width = `${rect.width}px`;
    draggedEl.style.transition = `${trs("width")}, ${trs("height")}, ${trs("background-color")}, ${trs("opacity")}, ${trs("color")} `;
    // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time
    window.setTimeout(() => (draggedEl.style.transition += `, ${trs("top")}, ${trs("left")}`), 0);
    draggedEl.style.zIndex = "9999";
    draggedEl.style.cursor = "grabbing";

    return draggedEl;
}
/**
 * clones the given element and applies proper styles and transitions to the dragged element
 * @param {HTMLElement} originalElement
 * @return {Node} - the cloned, styled element
 */
clones the given element and applies proper styles and transitions to the dragged element
@param {HTMLElement} originalElement
@return {Node} - the cloned, styled element
clones the given element and applies proper styles and transitions to the dragged element @param { HTMLElement } originalElement @return { Node } - the cloned styled element
function createDraggedElementFrom(originalElement) {
    const rect = originalElement.getBoundingClientRect();
    const draggedEl = originalElement.cloneNode(true);
    copyStylesFromTo(originalElement, draggedEl);
    draggedEl.id = `dnd-action-dragged-el`;
    draggedEl.style.position = "fixed";
    draggedEl.style.top = `${rect.top}px`;
    draggedEl.style.left = `${rect.left}px`;
    draggedEl.style.margin = "0";
    draggedEl.style.boxSizing = "border-box";
    draggedEl.style.height = `${rect.height}px`;
    draggedEl.style.width = `${rect.width}px`;
    draggedEl.style.transition = `${trs("width")}, ${trs("height")}, ${trs("background-color")}, ${trs("opacity")}, ${trs("color")} `;
    window.setTimeout(() => (draggedEl.style.transition += `, ${trs("top")}, ${trs("left")}`), 0);
    draggedEl.style.zIndex = "9999";
    draggedEl.style.cursor = "grabbing";
    return draggedEl;
}
function createDraggedElementFrom ( originalElement ) { const rect = originalElement . getBoundingClientRect ( ) ; const draggedEl = originalElement . cloneNode ( true ) ; copyStylesFromTo ( originalElement , draggedEl ) ; draggedEl . id = ` ` ; draggedEl . style . position = "fixed" ; draggedEl . style . top = ` ${ rect . top } ` ; draggedEl . style . left = ` ${ rect . left } ` ; draggedEl . style . margin = "0" ; draggedEl . style . boxSizing = "border-box" ; draggedEl . style . height = ` ${ rect . height } ` ; draggedEl . style . width = ` ${ rect . width } ` ; draggedEl . style . transition = ` ${ trs ( "width" ) } ${ trs ( "height" ) } ${ trs ( "background-color" ) } ${ trs ( "opacity" ) } ${ trs ( "color" ) } ` ; window . setTimeout ( ( ) => ( draggedEl . style . transition += ` ${ trs ( "top" ) } ${ trs ( "left" ) } ` ) , 0 ) ; draggedEl . style . zIndex = "9999" ; draggedEl . style . cursor = "grabbing" ; return draggedEl ; }
clones the given element and applies proper styles and transitions to the dragged element
 @param {HTMLElement} originalElement
 @return {Node} - the cloned, styled element
clones the given element and applies proper styles and transitions to the dragged element @param { HTMLElement } originalElement @return { Node } - the cloned styled element
// we can't have relative or automatic height and width or it will break the illusion // this is a workaround for a strange browser bug that causes the right border to disappear when all the transitions are added at the same time