React 拖动布局
<p>安装组件react-grid-layout</p><div class="cnblogs_code">
<pre>yarn add react-grid-layout</pre>
</div>
<p>引入拖动样式,不然没有拖动效果</p>
<div class="cnblogs_code">
<pre>import '../../../node_modules/react-grid-layout/css/styles.css'</pre>
</div>
<p> </p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">
import { IProps } from </span>'config/models'<span style="color: rgba(0, 0, 0, 1)">
import { Row, } from </span>'antd'<span style="color: rgba(0, 0, 0, 1)">
import _ from </span>"lodash"<span style="color: rgba(0, 0, 0, 1)">;
import GridLayout from </span>"react-grid-layout"<span style="color: rgba(0, 0, 0, 1)">;
import RGL, { WidthProvider } from </span>"react-grid-layout"<span style="color: rgba(0, 0, 0, 1)">;
import </span>'../../../node_modules/react-grid-layout/css/styles.css'<span style="color: rgba(0, 0, 0, 1)">
const ReactGridLayout </span>=<span style="color: rgba(0, 0, 0, 1)"> WidthProvider(RGL);
interface LoginProp extends IProps {
}
interface LoginState {
loginName: string,
loginPassword: string,
layout: any,
config: {
className: string,
items: number,
rowHeight: number,
cols: number
}
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> class HomePage extends React.Component<IProps, LoginState><span style="color: rgba(0, 0, 0, 1)"> {
constructor(props: any) {
super(props)
const layout </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.generateLayout();
</span><span style="color: rgba(0, 0, 255, 1)">this</span>.state =<span style="color: rgba(0, 0, 0, 1)"> {
loginName: </span>''<span style="color: rgba(0, 0, 0, 1)">,
loginPassword: </span>''<span style="color: rgba(0, 0, 0, 1)">,
layout: layout,
config: {
className: </span>"layout"<span style="color: rgba(0, 0, 0, 1)">,
items: </span>20<span style="color: rgba(0, 0, 0, 1)">,
rowHeight: </span>30<span style="color: rgba(0, 0, 0, 1)">,
cols: </span>12<span style="color: rgba(0, 0, 0, 1)">
}
}
}
generateDOM() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> _.map(_.range(20), <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (i) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><div key={i} style={{ background: '#ccc' }}>
<span className="text">{i}</span>
</div>
<span style="color: rgba(0, 0, 0, 1)"> );
});
}
generateLayout() {
</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">
static:true + isDraggable:true 全局拖拽,不会自动挤开其他div
static:false + isDraggable:true 拖拽自动挤开其他div
</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
<span style="color: rgba(0, 0, 255, 1)">return</span> _.map(<span style="color: rgba(0, 0, 255, 1)">new</span> Array(20), <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (item, i) {
const y </span>= Math.ceil(Math.random() * 4) + 1<span style="color: rgba(0, 0, 0, 1)">;
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
x: (i </span>* 2) % 12<span style="color: rgba(0, 0, 0, 1)">,
y: Math.floor(i </span>/ 6) *<span style="color: rgba(0, 0, 0, 1)"> y,
w: </span>2<span style="color: rgba(0, 0, 0, 1)">,
h: y,
i: i.toString(),
static: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
isResizable: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
isDraggable: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
isDroppable: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
};
});
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 拖动改变后的心数组</span>
<span style="color: rgba(0, 0, 0, 1)"> onLayoutChange(layout: any) {
</span><span style="color: rgba(0, 0, 255, 1)">debugger</span>
<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> this.props.onLayoutChange(layout);</span>
<span style="color: rgba(0, 0, 0, 1)"> }
render() {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><>
<<span style="color: rgba(0, 0, 0, 1)">ReactGridLayout</span><span style="color: rgba(0, 0, 0, 1)">
layout</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state.layout}
onLayoutChange</span>={<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.onLayoutChange}
{...</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.state.config}
</span>><span style="color: rgba(0, 0, 0, 1)">
{</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.generateDOM()}
</span></ReactGridLayout>
</>
<span style="color: rgba(0, 0, 0, 1)"> )
}
}</span></pre>
</div>
<p> </p>
<p>api https://www.ctolib.com/react-grid-layout.html#demos</p><br><br>
来源：https://www.cnblogs.com/-Kam/p/12559011.html
頁:
[1]