Keep draggable window within viewport when browser has been resized.

[arsalaanzaidi]

trafficstars

Is there a prop that can be used or any new approaches to keep a draggable floating window within viewport even when the browser has been resized. Currently a draggable floating window just disappears when the browser has been resized.

[Melkeydev]

No, but here is a solution that worked for me:

  const triggerMouseEvent = (element, eventType) => {
    const mouseEvent = document.createEvent("MouseEvents");

    mouseEvent.initEvent(eventType, true, true);
    element.dispatchEvent(mouseEvent);
  };

  useEffect(() => {
    const listener = () => {
      triggerMouseEvent(ref.current, "mouseover");
      triggerMouseEvent(ref.current, "mousedown");
      triggerMouseEvent(document, "mousemove");
      triggerMouseEvent(ref.current, "mouseup");
      triggerMouseEvent(ref.current, "click");
    };

    addEventListener("resize", listener);
    return () => removeEventListener("resize", listener);
  }, []);

and pass the ref to the component that you want to drag defined within Draggable

[dhananjayspring]

I am also facing the same issue, I want to maintain the draggable item position on window resize.