3

I am using react grid layout with amcharts3-react everything is just fine, I can move elements around but, this time I can't use amcarts Zoom handles... They are draggable as well.I tried to use grid layout's cancelDraggable feature but nothing happened. even it didn't prevent the area that I specify for nonedragging. What could be the possible solution?

enter image description here

                <GridLayout>
                  <div key="d" data-grid={{x: 4, y: 0, w: 4, h: 2, draggableHandle: '.dragHandle', draggableCancel:'.noneDraggable'}}>
                    <span className="dragHandle">[DRAG HERE]</span>
                    <div className="noneDraggable">
                      <Chart />
                    </div>
                  </div>

                  <div key="c" data-grid={{x: 0, y: 0, w: 4, h: 2}}>
                    <Chart />
                  </div>

                </GridLayout>
CWSites
  • 1,428
  • 1
  • 19
  • 34
beratuslu
  • 1,101
  • 3
  • 14
  • 27

1 Answers1

3

I solved by associating the property to the dashboard itself, not the items, like so: 

<ResponsiveReactGridLayout 
  rowHeight={75}
  layouts={this.props.dashboard.record.layout} 
  onBreakpointChange={this.onBreakpointChange.bind(this)}
  onDragStop={this.onDragStop.bind(this)}
  draggableCancel='.dashboard-item-content' 
  draggableHandle='.dashboard-item-header'
  onResizeStop={this.onResizeStop.bind(this)}>
    {this.generateDOM()}
</ResponsiveReactGridLayout>

Try to associate the 2 properties to your GridLayout jsx node.

Francesco Meli
  • 2,484
  • 2
  • 21
  • 52
  • Hi sir I have one issue regarding `react-grid-layout` https://stackoverflow.com/questions/66438916/how-to-create-dynamic-drag-and-drop-layout-with-react-grid-layout This is my post I have put please check the edited part once, it will be great if you can help. – manish thakur Mar 08 '21 at 10:17