我正在使用 React 网格布局 https://github.com/STRML/react-grid-layout . 并以我需要创建一个可拖动的父 div 和一个可拖动的子 div 的方式使用它。划分工作完美，但我需要实现，当我拖动子 div 时，应该禁用父 div 的拖动。
以下是我已经实现的代码，但我无法拖动子 div 以保持父 div 不可拖动:
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;
最佳答案
将 onDragStart 属性传递给子网格布局并在其中跟踪代码，使其相应地工作!
onDragStart={(layout, oldItem, newItem, placeholder, e, element)=>{
e.stopPropagation();
}}
关于javascript - 拖动子网格布局也倾向于拖动父网格布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47830106/