How react-grid-layout conditionally drop

Question

I recently use react-grid-layout to customize my project.

It's all perfect, while one thing is hard to do. I hope user drop item from top to bottom and left to right. Either auto-rearrangement or stop drop behavior.

I tried on handler to trace each drop ( or drag over ) place, while it's callback function and have nothing to do to return false or cancel THAT drop.

So, I want to ask:

1. How could I make user dnd from top to bottom and left to right?
2. How could I cancel drop behavior when dragging?

      <ResponsiveGridLayout
        className="layout"
        layouts={isDraggable ? tempLayouts : gridData.layouts}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
        compactType="horizontal"
        onBreakpointChange={handleBreakPointChange}
        onLayoutChange={handleLayoutChange}
        draggableHandle=".grid-item__title"
        useCSSTransforms={false}
        isResizable={isDraggable}
        isDraggable={isDraggable}
        resizeHandles={['se']}
        preventCollision
      >
        {Object.keys(gridData.data).map((key, index) => (
           <GridItemContainer key={key} data={gridData.data[key]} ref={responsiveRef}/>
        ))}
      </ResponsiveGridLayout>

RGL layout ideal behavior