可拖动组件 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'; }