shimsho Posted September 20, 2021 Share Posted September 20, 2021 Hi, right now Im having an issue with draggable parents with draggable children. The idea is that the parent will rotate and when a child is in a drag state the parent will stop rotating. I have tried disabling the parent instance with .disable() using onDrag, onDragStart and .enable() when onDragEnd, however when the drag ends the parent doesn't enable. Here is the code and an gif of the issue. import React, { useRef, useEffect } from 'react' import { styled } from '@material-ui/core' import { gsap } from 'gsap' import { Draggable, InertiaPlugin } from 'gsap/all' import heart from './heart.png' import pupper from './pupper.png' import glow from './glow.gif' gsap.registerPlugin(Draggable); gsap.registerPlugin(InertiaPlugin); const App = () => { const dragInstance = useRef(null); useEffect(() => { dragInstance.current = Draggable.create("#draggable", { type: "rotation", inertia: true }); Draggable.create("#heart", { onDrag: (e) => onDrag(e), onDragEnd: dragInstance.current[0].enable(), }); }, []); const onDrag = (e) => { e.stopPropagation(); dragInstance.current[0].disable() } return ( <Wrapper> <div className="scrollbar"> <div className="btn"> <span /> <span /> <span /> </div> </div> <img className="glow" src={glow} alt="glow" /> <Root> <img src={pupper} alt="pupper" /> <Block id="draggable"> {Array(12).fill('t').map((data, i) => <div className="dial" style={{transform: `rotate(${i * 30}deg)`}}><img id="heart" src={heart} alt="heart" /></div>)} </Block> </Root> </Wrapper> ); } const Wrapper = styled('div')({ display: 'flex', width: 700, height: 520, margin: 'auto', position: 'relative', '& > .scrollbar': { position: 'absolute', bottom: -5, left: 0, right: 0, width: '100%', maxWidth: 'calc(100% - 200px)', margin: '0 auto', height: 8, background: 'linear-gradient( 109.6deg, rgba(255,24,134,1) 11.2%, rgba(252,232,68,1) 52%, rgba(53,178,239,1) 100.2% );', borderRadius: 5, zIndex: 12, '& > .btn': { display: 'flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 18, background: 'white', position: 'absolute', top: -5, marginLeft: '50%', borderRadius: 20, '& > span': { height: '100%', maxHeight: 'calc(100% - 4px)', width: 1, background: '#9a9a9a', margin: '0 2.5px', } } }, '& > img': { position: 'absolute', left: 0, right: 0, margin: 'auto', bottom: 0, zIndex: 9, }, }) const Root = styled('div')({ display: 'flex', width: 700, height: 520, overflow: 'hidden', margin: 'auto', position: 'relative', maskImage: 'linear-gradient(180deg, black 70%, transparent)', zIndex: 11, '& > img': { position: 'absolute', left: 0, right: 0, margin: 'auto', bottom: 0, zIndex: -1, pointerEvents: 'none', }, }) const Block = styled('div')({ display: 'flex', width: 600, height: 600, border: '5px solid #131c3d', margin: 'auto', borderRadius: '100%', position: 'absolute', top: 35, left: 0, right: 0, zIndex: 10, '& > .dial': { height: 82, width: 82, paddingBottom: 253, position: 'absolute', top: -35, left: 0, right: 0, margin: '0 auto', transformOrigin: 'bottom center', } }) export default App; Link to comment Share on other sites More sharing options...
Solution shimsho Posted September 20, 2021 Author Solution Share Posted September 20, 2021 Fixed issue by adding arrow function to onDragEnd onDragEnd: () => dragInstance.current[0].enable() 2 Link to comment Share on other sites More sharing options...
Cassie Posted September 20, 2021 Share Posted September 20, 2021 Glad you figured this out Shimsho - thanks for popping back to update the thread. Much appreciated! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now