Dragging Child grid layout tends to drag the parent grid layout as well

Question

I am using React Grid Layout https://github.com/STRML/react-grid-layout . And working with it in such a way that i need to create a draggable parent div along with a draggable child div. The divisions works perfect, but i need to implement that when i drag the child div, dragging of parent div should be disabled.

Following is the code i have implemented but i'm unable to drag the child div keeping the parent div undraggable:

import React from 'react';
import {
 Grid,
 Label,
 Card,
 Button
} from 'semantic-ui-react'
import {theme} from '../../components/AutomataApp/styles';
import RGL, {WidthProvider} from 'react-grid-layout';
import KanbanCard from '../../components/AutomataApp/KanbanCard';
import {
 cardDragStart
} from './KanbanViewActions';
import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";
const ReactGridLayout = WidthProvider(RGL);

class KanbanViewPanel extends React.Component{

 render(){
    const layoutExternal = [
        {i: "col1", x: 0, y: 0, w: 1, h: 2},
        {i: "col2", x: 1, y: 0, w: 1, h: 2},
    ];
    const layoutInternal = [
        {i: "card1", x: 0, y: 0, w: 1, h: 1 },
        {i: "card2", x: 0, y: 1, w: 1, h: 1 },
        {i: "card3", x: 0, y: 2, w: 1, h: 1 }
    ]

    return (
        <div>
            <div>
                <Label>
                    Name Filter
                </Label>
            </div>
            <br/>
            <div style={{backgroundColor:theme.headingBackground, height:"-webkit-fill-available", padding:"20px"}}>
                <ReactGridLayout 
                    className="layout out" 
                    preventCollision={false} 
                    layout={layoutExternal} 
                    isResizable={false} 
                    cols={4} 
                    compactType='horizontal' 
                    isDraggable={true}
                    autoSize={false}
                >
                    <div key="col1">
                        <Card fluid>
                            <div style={{backgroundColor:"blue", height:"2px"}}></div>
                            <Card.Content>
                                <div>
                                    <span>To Do  </span>
                                    <span style={{color:"grey"}}>(2)</span>
                                </div>
                                <ReactGridLayout 
                                    className="layout in" 
                                    layout={layoutInternal} 
                                    cols={1}
                                    isResizable={false} 
                                    isDraggable={true}
                                    autoSize={true}
                                >
                                    <div key="card1">
                                        <KanbanCard
                                            heading="Kanban View Design COL1"
                                            meta="Project Automata"
                                        />
                                    </div>
                                    <div key="card2">
                                        <KanbanCard
                                            heading="Demo Card Design COL1"
                                            meta="Project Automata"
                                        />
                                    </div>
                                    <div key="card3">
                                        <KanbanCard
                                            heading="Example Card Design COL1"
                                            meta="Project Automata"
                                        />
                                    </div>
                                </ReactGridLayout>
                            </Card.Content>
                        </Card>
                    </div>
                    <div key="col2">
                        <Card fluid>
                            <div style={{backgroundColor:"purple", height:"2px"}}></div>
                            <Card.Content>
                                <div>
                                    <span>Done  </span>
                                    <span style={{color:"grey"}}>(2)</span>
                                </div>
                                <ReactGridLayout 
                                    className="layout in" 
                                    layout={layoutInternal} 
                                    cols={1} 
                                    isResizable={false}
                                    isDraggable={true}
                                    autoSize={true}
                                >
                                    <div key="card1">
                                        <KanbanCard
                                            heading="Kanban View Design COL2"
                                            meta="Project Automata"
                                        />
                                    </div>
                                    <div key="card2">
                                        <KanbanCard
                                            heading="Demo Card Design COL2"
                                            meta="Project Automata"
                                        />
                                    </div>
                                </ReactGridLayout>
                            </Card.Content>
                        </Card>
                    </div>
                </ReactGridLayout>
            </div>
        </div>
    )
  }
}

export default KanbanViewPanel;

Answer 1

Passing onDragStart prop into child grid layout and following code inside it, makes it work accordingly!

onDragStart={(layout, oldItem, newItem, placeholder, e, element)=>{
     e.stopPropagation();
}}