react-grid-layout 上的 draggableCancel

Question

我正在使用 react grid layout with amcharts3-react 一切都很好，我可以移动元素，但是这次我不能使用 amcarts 缩放手柄...它们是可拖动的，因为 well.I 尝试使用网格布局的 cancelDraggable 功能，但没有任何反应。即使它没有阻止我为非拖动指定的区域。可能的解决方案是什么？

                <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>

Answer 1

我通过将属性关联到仪表板本身而不是项目来解决，如下所示：

<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>

尝试将这 2 个属性关联到您的 GridLayout jsx 节点。

react-grid-layout 上的 draggableCancel

draggableCancel on react-grid-layout

reactjs

react-grid-layout