I just want my Element that can only be moved to viewport，because my element is position of fixed。but I set bounds="body" and cannot work,is still can move in the direction of down while out of viewpoint  #714

Activity

1. hututuhu

   changed the title [-]I just want my Element that can only be moved to viewport，because my element is position of fixed。but I set bounds="body" and cannot work,because is still can move in the direction of down while out of viewpoint [/-] [+]I just want my Element that can only be moved to viewport，because my element is position of fixed。but I set bounds="body" and cannot work,is still can move in the direction of down while out of viewpoint [/+] on Mar 21, 2023
2. tinywaves commented on Apr 17, 2023

   

   tinywaves

   on Apr 17, 2023

   Last edited by tinywaves

   More actions

   Yes, I also encountered this problem. Do you have the solution now? Thank you. @hututuhu
3. hardik79 commented on Aug 28, 2023

   

   hardik79

   on Aug 28, 2023

   More actions

   Hello @TinyRipple and @hututuhu ,
   I have a solution to your problem. Please add bounds={bounds} into the Draggable and ref={dragRef} into the main draggable div like
   
4. hardik79 commented on Aug 28, 2023

   

   hardik79

   on Aug 28, 2023

   More actions

   Check https://github.com/hardik79/react-draggable/blob/main/src/App.js solution example for your problem.
5. hututuhu commented on Sep 13, 2023

   

   hututuhu

   on Sep 13, 2023

   Author

   More actions

   Yes, I also encountered this problem. Do you have the solution now? Thank you. @hututuhu

   I solve this problem by using onStop and position.
   

   
6. YuLingCheng commented on Feb 21, 2024

   

   YuLingCheng

   on Feb 21, 2024

   More actions

   Check https://github.com/hardik79/react-draggable/blob/main/src/App.js solution example for your problem.

   Setting the computed bounds works well, thanks for the tip 👍
   I think we can manage without a useEffect and rely on the onStart prop to recompute the bounds whenever the users want to start dragging. I just used this strategy to solve similar issue to limit the bounds of a draggable Mui modal.

   function App() {
     const [bounds, setBounds] = useState({});
     const contentRef = useRef(null);
   
     function updateBounds() {
       if (contentRef.current !== null) {
         setBounds({
           left: ..., 
           top: ...,
           right: ...,
           bottom: ..., // Whatever computation works in your case based on contentRef.current
         });
       }
   
     return (
       <Draggable bounds={bounds} onStart={updateBounds}>
         <YourComponent ref={contentRef} />
       </Draggable>
     );
   }
7. STRML

   added

   bug

   needs-triageMaintainer needs to evaluateMaintainer needs to evaluate

   on Sep 27, 2026