Repository navigation
Keep draggable window within viewport when browser has been resized. #622
Description
Activity
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
refto the component that you want to drag defined withinDraggableReacted by Václav R. GröhlingI am also facing the same issue, I want to maintain the draggable item position on window resize.
Had the same problem, that ☝️ solution (#622 (comment)) helped, but I had to delay the
mouseupevent and I used modern way of creating mouse events// this can be a statically declared method const triggerMouseEvent = (element: Node, eventType: string) => { const mouseEvent = new MouseEvent(eventType, { bubbles: true, cancelable: true, view: window, }); element.dispatchEvent(mouseEvent); }; const dragableContainerRef = useRef<HTMLDivElement>(); useEffect(() => { const simulateDrag = () => { if (dragableContainerRef.current) { triggerMouseEvent(dialogPaperRef.current, 'mouseover'); triggerMouseEvent(dialogPaperRef.current, 'mousedown'); window.requestAnimationFrame(() => { if (dragableContainerRef.current) { triggerMouseEvent(document, 'mousemove'); triggerMouseEvent(dialogPaperRef.current, 'mouseup'); triggerMouseEvent(dialogPaperRef.current, 'click'); } }); } }; // run on-mount for compensating initial out-of-bounds position simulateDrag(); // run on-resize to compensate out-of-bounds position, react-draggable does not handle this addEventListener('resize', simulateDrag); return () => { removeEventListener('resize', simulateDrag); }; }, []);
Reacted by Greg Neeser and zhuyali1995
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.