Sharing How to Block drag animation of a parent element from a child element drag event.

[mitchell-up]

Before discussing my idea, please share your idea, if you hava a more methods or approach. Also I'll really appreciate if you could review the codes.

Problem

We often encounter situations where we need to make draggable UI which contains other draggable elements.

The problem is that if you drag a child element, drag animations will occur at both a child itself and its parent because of event propagation.

So we can come up with a simple solution using event.stopPropagation() like below.

But it didn't work.

Solution

So I'm gonna approach that drag prop state in parent container can be changed by drag event on a child element in the parent.

Example below is making a draggable container for Modal.

1. Manage drag state using ContextAPI.

Pass dragState, setDragState into BottomDragContext so that inner component can change the state.

/**
 * Drag State Context
 */
type BottomDragState = 'y' | false
interface BottomDragContextValue {
  state: BottomDragState
  setState: Dispatch<SetStateAction<BottomDragState>>
}
const BottomDragContext = createContext<BottomDragContextValue>({
  state: 'y',
  setState: () => {},
})


/**
 * ModalDragger
 */
export interface ModalDraggerProps {
  children: ReactNode
  onClose: () => void
}
export function ModalDragger({ onClose, children }: ModalDraggerProps) {
  const [dragState, setDragState] = useState<BottomDragState>('y')

  return (
    <motion.div
      drag={dragState}
      dragConstraints={{ top: 0, bottom: 0 }}
      onDragEnd={(_, info) => {
        const shouldClose = info.offset.y > 60
    
        if (shouldClose) {
          onClose()
        }
      }}
    >
      <BottomDragContext.Provider value={{
        state: dragState,
        setState: setDragState,
      }}>
        {children}
      </BottomDragContext.Provider>
    </motion.div>
  )
}

2. Inner component changes that drag state.

Now we can change the parent drag state using useContext on any component. But I suggest to make wrapping component changing drag state.

/**
 * ModalDraggerBlocker
 */
export interface ModalDraggerBlockerBaseProps {}

export type ModalDraggerBlockerProps<Element extends ElementType> = PolymorphicProps<
  ModalDraggerBlockerBaseProps, Element
>

export function ModalDraggerBlocker<Element extends ElementType = 'div'>({
  as,
  children,
}: ModalDraggerBlockerProps<Element>) {
  const Component = as || 'div'

  const { setState } = useContext(BottomDragContext)

  return (
    <Component 
      onMouseDown={() => setState(false)} 
      onMouseUp={() => setState('y')}
    >
      {children}
    </Component>
  )
}

Use Case

function Component() {
  return (
    <ModalDragger>
      <ModalDraggerBlocker>
        {/*
          Components here will not trigger
          drag animation of the ModalDragger.
        */} 
      </ModalDraggerBlocker>
    </ModalDragger>
  )
}