react grid layout的簡單應用

實現拖拽，網格布局

npm install react-grid-layout

import react,

from
'react'
;import
from
'react-grid-layout'
;import
'./index.scss'
;const responsivegridlayout =
widthprovider
(responsive)
;class
gridlayout
extends
component;}
componentwillmount()
;componentwillunmount()
;}//props發生變化時觸發
componentwillreceiveprops
(props)
)this
.setstate()
;}getuserinfo=(
)=>
,// w:8 是中， w:15 是大
,// h:10, 是中， h:4,是小
,// w:8,是大，w:4,是中
,// w:8,是大，w:4,是中]}
)// this.setstate(, // w:8 是中， w:15 是大
// , // h:10, 是中， h:4,是小
// ,// w:8,是大，w:4,是中
// , // w:8,是大，w:4,是中
// ]
// })
}else
)// this.state.layout = _eulayoutarr}}
//儲存拖拽移動的位置到快取
onlayoutchange
=(layout, layouts)
=>
)=>})
localstorage.
setitem
('layoutarr'
,json
.stringify
(layoutarr)
)this
.props.
setlayout([
...layoutarr])}
render()
=this
.props;
return
(<
>
"dashboardcontent"
>
classname=
"layout" 
draggablecancel=
".react-drag"
// 加了這個類名是不能被移動的
layouts=
} measurebeforemount=
rowheight=
breakpoints=
} cols=
} isresizable=
onlayoutchange=
margin=
compacttype=
preventcollision=
>
>
<
/div>})
}<
/responsivegridlayout>
<
/div>
<
/>);
}}export
default gridlayout;

// index.scss

.dashboardcontent

import

from
'react'
;import gridlayout from
'./gridlayout/index'
;const list =[,
,,];
const
index=(
)=>
,// w:8 是中， w:15 是大
,// h:10, 是中， h:4,是小
,// w:8,是大，w:4,是中
// w:8,是大，w:4,是中])
;return
(layout=
setlayout=
>
<
/gridlayout>
<
/div>)}
export
default index;

Windows Installer的簡單應用

windows installer的簡單應用 2010年11月12日 因為要做乙個類似windows update的東西，以免程式更新時跑來跑去麻煩，雖然類似的工具很多，但是大都很複雜，於是決定自己做乙個類似的簡單程式。對比客戶端和伺服器端的程式版本，並把伺服器端新版本程式拷回來都好做 用vpn，相...

Windows Installer的簡單應用

windows installer的簡單應用 2010年11月12日 因為要做乙個類似windows update的東西，以免程式更新時跑來跑去麻煩，雖然類似的工具很多，但是大都很複雜，於是決定自己做乙個類似的簡單程式。對比客戶端和伺服器端的程式版本，並把伺服器端新版本程式拷回來都好做 用vpn，相...

css vertical align簡單的應用

vertical align屬性值 我見過的 1 用來寫在img標籤上，讓兩旁的字與底部 頂部 中間對齊 vertical align text top vertical align text bottom vertical align middle 這一前面的文字 這一前面的文字 src asse...