Jump to content
Search Community

Draggable parent with draggable children

shimsho test
Moderator Tag

Go to solution Solved by shimsho,

Recommended Posts

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.

483a41f7701391e47d4c0d0cda198e2b.gif

 

import React, { useRefuseEffect } from 'react'
 
import { styled } from '@material-ui/core'
 
import { gsap } from 'gsap'
import { DraggableInertiaPlugin } 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((datai=> <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: 0right: 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: 0right: 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: 0right: 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: 0right: 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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...