react 可拖动组件 嵌套iframe bug

可拖动组件 react-draggable 再结合iframe时鼠标事件会失效，因此在iframe上面嵌套一层div即可。

 

 

  <Container>
                    <LeftContent width={leftBoxWidth}>
                        <div className="editor-col dragleft">
                            <Tabs defaultActiveKey="javascript" activeKey={this.state.activeKey} type="card" onChange={(key) => { this.tabChange(key); }}>
                                <TabPane tab="JS" key="javascript">
                                    {/* <Editor code={jsCode} language="javascript" getValue={this.state.goGetJavascript} sendValue={(value)=>this.getJs(value)}/> */}
                                </TabPane>
                                <TabPane tab="CSS" key="css">
                                    {/* <Editor code={cssCode} language="css" getValue={this.state.goGetCss} sendValue={(value)=>this.getCss(value)}/> */}
                                </TabPane>
                                <TabPane tab="HTML" key="html">
                                    {/* <Editor code={htmlCode} language="html" getValue={this.state.goGetHtml} sendValue={(value)=>this.getHtml(value)}/> */}
                                </TabPane>

                            </Tabs>
                            <div className='runBtn'>
                                <Button type="round" style={{ marginRight: "8px" }} onClick={() => {
                                    this.setState({
                                        html: this.runcode()
                                    });
                                }} ><IconFont  type="iconicon_function" />运行</Button>
                                {/* <Button type="round" style={{marginRight:"10px"}} onClick={() => {
                                this.saveCode();
                            }} icon="save" >保存</Button> */}
                                <CopyToClipboard
                                    text={this.state.copyContent}	//点击复制时的内容,可自行设置或传入
                                    onCopy={e => {  this.setState({
                                        copyContent: this.models[this.state.activeKey].getValue(),

                                    });
                                        console.log(this.state.copyContent)
                                    }}		//点击之后的回调
                                >
                                    <Button style={{ marginRight: "8px" }} type="round"  ><IconFont type="iconicon_copy" />复制</Button>
                                </CopyToClipboard>
                                <Button type="round" style={{ marginRight: "16px" }} onClick={this.resetCode} ><IconFont type="iconicon_reduction" />还原</Button>
                            </div>
                            <div className="editor " style={{width:'100%',minHeight:'1px'}}  ref={element => this.container = element}></div>
                        </div>
                        <Draggable
                            axis="x"
                            defaultPosition={{ x: 0, y: 0 }}
                            bounds={{ left: leftBoxMinWidth - initialLeftBoxWidth, right: leftBoxMaxWidth - initialLeftBoxWidth }}
                            onDrag={this.onDrag}
                            onStop={this.onDragStop}
                            onStart={this.onDragStart}
                        >
                            <DraggableBox
                                left={initialLeftBoxWidth - 5}
                                background={dragBoxBackground} />
                        </Draggable>
                    </LeftContent>
                    <RightContent leftBoxWidth={leftBoxWidth}>
                        <div className="editor-viewer">
                            <div className="cover">
                            </div>
                                <SceneContainer html={this.state.html} fullScreen={this.state.sceneContainerFullScreen}/>


                        </div>
                    </RightContent>
                </Container>

 

处理事件

// 拖动时设置拖动box背景色，同时更新左右box的宽度
    onDrag = (ev, ui) => {
            const { initialLeftBoxWidth } = this.state;
            const newLeftBoxWidth = ui.x + initialLeftBoxWidth;
            this.setState({
                leftBoxWidth: newLeftBoxWidth,
                dragBoxBackground: '#FFB6C1'
            });
    };

    // 拖拽结束，重置drag-box的背景色
    onDragStop = () => {
        this.setState({
            dragBoxBackground: 'transparent'
        });
        this.cover.style.zIndex='-100';
    };

    onDragStart = () => {
        this.cover.style.zIndex = '999';

    }