Simulate drag and drop

We have some a custom drag-n-drop multi select form control in our project and we’ve added a small helper to simulate drag and drop events (we found the code posted somewhere and we tweaked it a bit). Our project is using React DnD but I believe that the helper would apply to any generic html5 DnD implementation.

I wonder whether this is something that would be useful to add and maintain here.

Relevant code or config

const fireMouseEvent = function (
    type: string,
    elem: EventTarget,
    centerX: number,
    centerY: number
) {
    const evt = document.createEvent('MouseEvents');
    evt.initMouseEvent(
        type,
        true,
        true,
        window,
        1,
        1,
        1,
        centerX,
        centerY,
        false,
        false,
        false,
        false,
        0,
        elem
    );
    return elem.dispatchEvent(evt);
};

export const dragAndDrop = (elemDrag: HTMLElement, elemDrop: HTMLElement) => {
    act(() => {
        // calculate positions
        let pos = elemDrag.getBoundingClientRect();
        const center1X = Math.floor((pos.left + pos.right) / 2);
        const center1Y = Math.floor((pos.top + pos.bottom) / 2);

        pos = elemDrop.getBoundingClientRect();
        const center2X = Math.floor((pos.left + pos.right) / 2);
        const center2Y = Math.floor((pos.top + pos.bottom) / 2);

        // mouse over dragged element and mousedown
        fireMouseEvent('mousemove', elemDrag, center1X, center1Y);
        fireMouseEvent('mouseenter', elemDrag, center1X, center1Y);
        fireMouseEvent('mouseover', elemDrag, center1X, center1Y);
        fireMouseEvent('mousedown', elemDrag, center1X, center1Y);

        // start dragging process over to drop target
        const dragStarted = fireMouseEvent(
            'dragstart',
            elemDrag,
            center1X,
            center1Y
        );
        if (!dragStarted) {
            return;
        }

        fireMouseEvent('drag', elemDrag, center1X, center1Y);
        fireMouseEvent('mousemove', elemDrag, center1X, center1Y);
        fireMouseEvent('drag', elemDrag, center2X, center2Y);
        fireMouseEvent('mousemove', elemDrop, center2X, center2Y);

        // trigger dragging process on top of drop target
        fireMouseEvent('mouseenter', elemDrop, center2X, center2Y);
        fireMouseEvent('dragenter', elemDrop, center2X, center2Y);
        fireMouseEvent('mouseover', elemDrop, center2X, center2Y);
        fireMouseEvent('dragover', elemDrop, center2X, center2Y);

        // release dragged element on top of drop target
        fireMouseEvent('drop', elemDrop, center2X, center2Y);
        fireMouseEvent('dragend', elemDrag, center2X, center2Y);
        fireMouseEvent('mouseup', elemDrag, center2X, center2Y);
    });
};

// example usage
dragAndDrop(screen.getByText('text of item to drag'), screen.getByLabelText('label of area to drop'));

[kentcdodds]

Yeah, for this kind of thing I think that Cypress is the place to go. Simulating drag-and-drop in an environment which does not support layout like jsdom (which is where most people use user-event) would be very tricky to get legit confidence from.

[kentcdodds]

That’s a: “I don’t think I would use it, but some people like yourself and others who use user-event in a real browser might. This means I’ll accept a pull request for it, but I won’t maintain it.” 😅