子グリッドレイアウトをドラッグすると、親グリッドレイアウトもドラッグされる傾向があります。

Question

リアクショングリッドレイアウトhttps://github.com/STRML/react-grid-layoutを使用しています。 そして、ドラッグ可能な親divとドラッグ可能な子divを作成する必要があるような方法で作業します。分割は完璧ですが、私はそれを実装する必要があります、私は子divをドラッグすると、親divのドラッグを無効にする必要があります。続き

は私が実装したコードですが、私は、親のdiv undraggableを保つ子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、それが動作しますそれに応じて！

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