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;
