Question

我正在使用React Grid Layout 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;

Answer 1

将onDragStart prop传递给子网格布局并在其中包含代码，使其相应地工作！

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

拖动子网格布局也会拖动父网格布局

1 个答案: