修改为render child的形式

src/AddRemove/index.tsx

@@ -1,78 +1,78 @@
-import *as React from 'react';
-import { Dragact } from '../lib/dragact';
+// import *as React from 'react';
+// import { Dragact } from '../lib/dragact';
 
-const Words = [
-    { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
-    { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
-    { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
-    { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
-    { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
-]
+// const Words = [
+//     { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
+//     { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
+//     { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
+//     { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
+//     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
+// ]
 
 
-const Card = (props: any) => {
-    const item: any = props.item;
-    const dataSet: any = props['data-set'];
-    return (
-        <div className='layout-Item' >
-            <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
-            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{dataSet.handle ? <div className='card-handle' id="dragact-handle">点我拖动</div> : item.content}</div>
-        </div>
-    )
-}
+// const Card = (props: any) => {
+//     const item: any = props.item;
+//     const dataSet: any = props['data-set'];
+//     return (
+//         <div className='layout-Item' >
+//             <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
+//             <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{dataSet.handle ? <div className='card-handle' id="dragact-handle">点我拖动</div> : item.content}</div>
+//         </div>
+//     )
+// }
 
 
-export class AddRemove extends React.Component<{}, {}> {
-    layoutWrap: HTMLDivElement | null
-    dragactNode: Dragact;
-    state = {
-        layout: [1]
-    }
+// export class AddRemove extends React.Component<{}, {}> {
+//     layoutWrap: HTMLDivElement | null
+//     dragactNode: Dragact;
+//     state = {
+//         layout: [1]
+//     }
 
-    componentDidMount() {
-        this.setState({
-            layout: this.dragactNode.getLayout()
-        })
-    }
-    handleClick = () => {
-        this.setState({
-            layout: [...this.state.layout, 1]
-        })
-        console.log(this.state.layout)
-    }
-    handleDeleteClick = () => {
-        this.state.layout.shift()
-        this.setState({
-            layout: [...this.state.layout]
-        })
-    }
+//     componentDidMount() {
+//         this.setState({
+//             layout: this.dragactNode.getLayout()
+//         })
+//     }
+//     handleClick = () => {
+//         this.setState({
+//             layout: [...this.state.layout, 1]
+//         })
+//         console.log(this.state.layout)
+//     }
+//     handleDeleteClick = () => {
+//         this.state.layout.shift()
+//         this.setState({
+//             layout: [...this.state.layout]
+//         })
+//     }
 
-    render() {
-        const margin: [number, number] = [5, 5];
-        const dragactInit = {
-            width: 800,
-            col: 12,
-            rowHeight: 800 / 12,
-            margin: margin,
-            className: 'normal-layout'
-        }
-        return (
-            <div>
-                <div style={{ display: 'flex', justifyContent: 'center' }} >
-                    <div>
-                        <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
-                        <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
-                            {this.state.layout.map((el, i) => {
-                                return (
-                                    <Card item={Words[0]} key={i} data-set={{ GridX: i * 3, GridY: 0, w: 3, h: 3 }} />
-                                )
-                            })}
-                        </Dragact>
-                        <button onClick={this.handleClick}>新增</button>
-                        <button onClick={this.handleDeleteClick}>删除</button>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
+//     render() {
+//         const margin: [number, number] = [5, 5];
+//         const dragactInit = {
+//             width: 800,
+//             col: 12,
+//             rowHeight: 800 / 12,
+//             margin: margin,
+//             className: 'normal-layout'
+//         }
+//         return (
+//             <div>
+//                 <div style={{ display: 'flex', justifyContent: 'center' }} >
+//                     <div>
+//                         <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
+//                         <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
+//                             {this.state.layout.map((el, i) => {
+//                                 return (
+//                                     <Card item={Words[0]} key={i} data-set={{ GridX: i * 3, GridY: 0, w: 3, h: 3 }} />
+//                                 )
+//                             })}
+//                         </Dragact>
+//                         <button onClick={this.handleClick}>新增</button>
+//                         <button onClick={this.handleDeleteClick}>删除</button>
+//                     </div>
+//                 </div>
+//             </div>
+//         )
+//     }
+// }

src/HandleLayout/index.tsx

@@ -1,77 +1,77 @@
-import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+// import * as React from 'react';
+// import { Dragact } from '../lib/dragact';
 
-import './index.css';
+// import './index.css';
 
-const Words = [
-    { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
-    { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
-    { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
-    { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
-    { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
-]
+// const Words = [
+//     { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
+//     { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
+//     { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
+//     { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
+//     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
+// ]
 
 
-const Card = (props: any) => {
-    const item: any = props.item;
-    const dataSet: any = props['data-set'];
-    return (
-        <div className='layout-Item' >
-            <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
-            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{dataSet.handle ? <div className='card-handle' id="dragact-handle">点我拖动</div> : item.content}</div>
-        </div>
-    )
-}
+// const Card = (props: any) => {
+//     const item: any = props.item;
+//     const dataSet: any = props['data-set'];
+//     return (
+//         <div className='layout-Item' >
+//             <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
+//             <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{dataSet.handle ? <div className='card-handle' id="dragact-handle">点我拖动</div> : item.content}</div>
+//         </div>
+//     )
+// }
 
 
-export class HandleLayout extends React.Component<{}, {}> {
-    layoutWrap: HTMLDivElement | null
-    dragactNode: Dragact;
-    state = {
-        layout: [1]
-    }
+// export class HandleLayout extends React.Component<{}, {}> {
+//     layoutWrap: HTMLDivElement | null
+//     dragactNode: Dragact;
+//     state = {
+//         layout: [1]
+//     }
 
-    componentDidMount() {
-        this.setState({
-            layout: this.dragactNode.getLayout()
-        })
-    }
-    handleClick = () => {
-        this.setState({
-            layout: [...this.state.layout, 1]
-        })
-        console.log(this.state.layout)
-    }
-    handleDeleteClick = () => {
-        this.state.layout.shift()
-        this.setState({
-            layout: [...this.state.layout]
-        })
-    }
+//     componentDidMount() {
+//         this.setState({
+//             layout: this.dragactNode.getLayout()
+//         })
+//     }
+//     handleClick = () => {
+//         this.setState({
+//             layout: [...this.state.layout, 1]
+//         })
+//         console.log(this.state.layout)
+//     }
+//     handleDeleteClick = () => {
+//         this.state.layout.shift()
+//         this.setState({
+//             layout: [...this.state.layout]
+//         })
+//     }
 
-    render() {
-        const margin: [number, number] = [5, 5];
-        const dragactInit = {
-            width: 800,
-            col: 12,
-            rowHeight: 800 / 12,
-            margin: margin,
-            className: 'normal-layout'
-        }
-        return (
-            <div>
-                <div style={{ display: 'flex', justifyContent: 'center' }} >
-                    <div>
-                        <h1 style={{ textAlign: 'center' }}>Handle Layout Demo</h1>
-                        <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
-                            <Card item={Words[0]} key={0} data-set={{ GridX: 0 * 3, GridY: 0, w: 3, h: 3 }} />
-                            <Card item={Words[1]} key={1} data-set={{ GridX: 1 * 3, GridY: 0, w: 3, h: 3 }} />
-                            <Card item={Words[2]} key={2} data-set={{ GridX: 2 * 3, GridY: 0, w: 3, h: 3, handle: true }} />
-                            <Card item={Words[3]} key={3} data-set={{ GridX: 3 * 3, GridY: 0, w: 3, h: 3 }} />
-                        </Dragact>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
+//     render() {
+//         const margin: [number, number] = [5, 5];
+//         const dragactInit = {
+//             width: 800,
+//             col: 12,
+//             rowHeight: 800 / 12,
+//             margin: margin,
+//             className: 'normal-layout'
+//         }
+//         return (
+//             <div>
+//                 <div style={{ display: 'flex', justifyContent: 'center' }} >
+//                     <div>
+//                         <h1 style={{ textAlign: 'center' }}>Handle Layout Demo</h1>
+//                         <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
+//                             <Card item={Words[0]} key={0} data-set={{ GridX: 0 * 3, GridY: 0, w: 3, h: 3 }} />
+//                             <Card item={Words[1]} key={1} data-set={{ GridX: 1 * 3, GridY: 0, w: 3, h: 3 }} />
+//                             <Card item={Words[2]} key={2} data-set={{ GridX: 2 * 3, GridY: 0, w: 3, h: 3, handle: true }} />
+//                             <Card item={Words[3]} key={3} data-set={{ GridX: 3 * 3, GridY: 0, w: 3, h: 3 }} />
+//                         </Dragact>
+//                     </div>
+//                 </div>
+//             </div>
+//         )
+//     }
+// }

src/LayoutRestore/index.tsx

@@ -1,88 +1,88 @@
-import * as React from 'react';
-import { Dragact } from '../lib/dragact'
-import './index.css';
+// import * as React from 'react';
+// import { Dragact } from '../lib/dragact'
+// import './index.css';
 
 
-interface CardItem {
-    content: string,
-    img: string
-}
+// interface CardItem {
+//     content: string,
+//     img: string
+// }
 
-const Words = [
-    { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
-    { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
-    { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
-    { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
-    { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
-]
+// const Words = [
+//     { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
+//     { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
+//     { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
+//     { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
+//     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
+// ]
 
 
-const Card = (props: any) => {
-    const item: CardItem = props.item;
-    return (
-        <div className='layout-Item'>
-            <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
-            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{item.content}</div>
-        </div>
-    )
-}
+// const Card = (props: any) => {
+//     const item: CardItem = props.item;
+//     return (
+//         <div className='layout-Item'>
+//             <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
+//             <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{item.content}</div>
+//         </div>
+//     )
+// }
 
 
-var storeLayout: any = {};
-export class LayoutRestore extends React.Component<{}, {}> {
-    dragactNode: Dragact;
-    handleOnDragEnd = () => {
-        const maping: any = {};
-        this.dragactNode.getLayout().forEach((item) => {
-            if (item.key)
-                maping[item.key] = item;
-        })
-        const parsedLayout = JSON.stringify(maping);
+// var storeLayout: any = {};
+// export class LayoutRestore extends React.Component<{}, {}> {
+//     dragactNode: Dragact;
+//     handleOnDragEnd = () => {
+//         const maping: any = {};
+//         this.dragactNode.getLayout().forEach((item) => {
+//             if (item.key)
+//                 maping[item.key] = item;
+//         })
+//         const parsedLayout = JSON.stringify(maping);
 
-        localStorage.setItem('layout', parsedLayout);
-    }
-    componentWillMount() {
-        const lastLayout = localStorage.getItem('layout');
-        if (lastLayout) {
-            storeLayout = JSON.parse(lastLayout);
-        }
-    }
+//         localStorage.setItem('layout', parsedLayout);
+//     }
+//     componentWillMount() {
+//         const lastLayout = localStorage.getItem('layout');
+//         if (lastLayout) {
+//             storeLayout = JSON.parse(lastLayout);
+//         }
+//     }
 
-    getLayoutItemForKey(key: string) {
-        return storeLayout[key]
-    }
+//     getLayoutItemForKey(key: string) {
+//         return storeLayout[key]
+//     }
 
-    renderDragact = () => {
-        const margin: [number, number] = [5, 5];
-        const dragactInit = {
-            width: 800,
-            col: 12,
-            rowHeight: 800 / 12,
-            margin: margin,
-            className: 'normal-layout'
-        }
+//     renderDragact = () => {
+//         const margin: [number, number] = [5, 5];
+//         const dragactInit = {
+//             width: 800,
+//             col: 12,
+//             rowHeight: 800 / 12,
+//             margin: margin,
+//             className: 'normal-layout'
+//         }
 
-        return (
-            <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} onDragEnd={this.handleOnDragEnd}>
-                {Words.map((el, index) => {
-                    const dataSet = this.getLayoutItemForKey(index + '');
-                    if (dataSet)
-                        return <Card item={el} key={index} data-set={...dataSet} />
-                    else
-                        return <Card item={el} key={index} data-set={{ GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 }} />
-                })}
-            </Dragact>
-        )
-    }
+//         return (
+//             <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} onDragEnd={this.handleOnDragEnd}>
+//                 {Words.map((el, index) => {
+//                     const dataSet = this.getLayoutItemForKey(index + '');
+//                     if (dataSet)
+//                         return <Card item={el} key={index} data-set={...dataSet} />
+//                     else
+//                         return <Card item={el} key={index} data-set={{ GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 }} />
+//                 })}
+//             </Dragact>
+//         )
+//     }
 
-    render() {
-        return (
-            <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <div>
-                    <h1 style={{ textAlign: 'center' }}>Layout Restore Demo</h1>
-                    {this.renderDragact()}
-                </div>
-            </div>
-        )
-    }
-}
+//     render() {
+//         return (
+//             <div style={{ display: 'flex', justifyContent: 'center' }}>
+//                 <div>
+//                     <h1 style={{ textAlign: 'center' }}>Layout Restore Demo</h1>
+//                     {this.renderDragact()}
+//                 </div>
+//             </div>
+//         )
+//     }
+// }

src/NormalLayout/index.tsx

@@ -1,5 +1,5 @@
 import *as React from 'react';
-import { Dragact } from '../lib/dragact'
+import { Dragact, DragactLayoutItem } from '../lib/dragact'
 import './index.css';
 
 
@@ -16,6 +16,12 @@ const Words = [
     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
 ]
 
+const fakeData = () => {
+    return Words.map((item, index) => {
+        return { ...item, GridX: index * 2, GridY: 0, w: 3, h: 3, key: index + '' }
+    })
+}
+
 
 const Card = (props: any) => {
     const item: CardItem = props.item;
@@ -29,17 +35,6 @@ const Card = (props: any) => {
 
 
 export class LayoutDemo extends React.Component<{}, {}> {
-    dragactNode: Dragact;
-    state = {
-        layout: []
-    }
-
-    componentDidMount() {
-        this.setState({
-            layout: this.dragactNode.getLayout()
-        })
-    }
-
     render() {
         const margin: [number, number] = [5, 5];
         const dragactInit = {
@@ -47,17 +42,18 @@ export class LayoutDemo extends React.Component<{}, {}> {
             col: 12,
             rowHeight: 800 / 12,
             margin: margin,
-            className: 'normal-layout'
+            className: 'normal-layout',
+            layout: fakeData()
         }
 
         return (
             <div style={{ display: 'flex', justifyContent: 'center' }}>
                 <div>
                     <h1 style={{ textAlign: 'center' }}>Normal Layout Demo</h1>
-                    <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
-                        {Words.map((el, index) => {
-                            return <Card item={el} key={index} data-set={{ GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 }} />
-                        })}
+                    <Dragact {...dragactInit} placeholder={true}>
+                        {(item: DragactLayoutItem, index: number) => {
+                            return <Card item={item} />
+                        }}
                     </Dragact>
                 </div>
             </div>

src/SortedTable/index.tsx

@@ -1,41 +1,41 @@
-import * as React from 'react';
-import { Dragact } from '../lib/dragact'
-import './index.css'
-
-const Words = [
-    { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
-    { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
-    { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
-    { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
-    { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
-]
-
-
-const Cell = (props: any) => {
-    const item = props.item;
-    return (
-        <div className='layout-Cell'>
-            <img src={item.img} style={{ width: 45, height: 45 }} draggable={false} alt='card'></img>
-            <div style={{ paddingLeft: 12, color: '#595959' }}>{item.content}</div>
-        </div>
-    )
-}
-
-
-
-export const SortedTable = () => {
-
-    return (
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
-            <div>
-                <h1 style={{ textAlign: 'center' }}>Sorted Table Demo</h1>
-                <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
-                    {Words.map((el, index) => {
-                        return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: 0, w: 1, h: 1, canResize: false }} />
-                    })}
-                </Dragact>
-            </div>
-        </div>
-    )
-}
+// import * as React from 'react';
+// import { Dragact } from '../lib/dragact'
+// import './index.css'
+
+// const Words = [
+//     { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
+//     { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
+//     { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
+//     { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
+//     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
+// ]
+
+
+// const Cell = (props: any) => {
+//     const item = props.item;
+//     return (
+//         <div className='layout-Cell'>
+//             <img src={item.img} style={{ width: 45, height: 45 }} draggable={false} alt='card'></img>
+//             <div style={{ paddingLeft: 12, color: '#595959' }}>{item.content}</div>
+//         </div>
+//     )
+// }
+
+
+
+// export const SortedTable = () => {
+
+//     return (
+//         <div style={{ display: 'flex', justifyContent: 'center' }}>
+//             <div>
+//                 <h1 style={{ textAlign: 'center' }}>Sorted Table Demo</h1>
+//                 <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
+//                     {Words.map((el, index) => {
+//                         return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: 0, w: 1, h: 1, canResize: false }} />
+//                     })}
+//                 </Dragact>
+//             </div>
+//         </div>
+//     )
+// }
 

src/StaticHeader/index.tsx

@@ -1,37 +1,37 @@
-import * as React from 'react';
-import { Dragact } from '../lib/dragact'
-import './index.css'
+// import * as React from 'react';
+// import { Dragact } from '../lib/dragact'
+// import './index.css'
 
-const Words = [
-    { content: 'Sorry I just can not move in any circumstances', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg', static: true },
-    { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
-    { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
-    { content: 'Sorry I just can not move in any circumstances,too', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738', static: true },
-    { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
-]
+// const Words = [
+//     { content: 'Sorry I just can not move in any circumstances', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg', static: true },
+//     { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
+//     { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
+//     { content: 'Sorry I just can not move in any circumstances,too', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738', static: true },
+//     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
+// ]
 
 
-const Cell = (props: any) => {
-    const { item } = props;
-    return (
-        <div className={`layout-Cell ${item.static ? "static" : ""}`} style={{ background: item.static ? "#e8e8e8" : "" }}>
-            <img src={item.img} style={{ width: 45, height: 45 }} draggable={false} alt='card'></img>
-            <div style={{ paddingLeft: 12, color: '#595959' }}>{item.content}</div>
-        </div>
-    )
-}
+// const Cell = (props: any) => {
+//     const { item } = props;
+//     return (
+//         <div className={`layout-Cell ${item.static ? "static" : ""}`} style={{ background: item.static ? "#e8e8e8" : "" }}>
+//             <img src={item.img} style={{ width: 45, height: 45 }} draggable={false} alt='card'></img>
+//             <div style={{ paddingLeft: 12, color: '#595959' }}>{item.content}</div>
+//         </div>
+//     )
+// }
 
-export const SortedTableWithStatic = () => {
-    return (
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
-            <div>
-                <h1 style={{ textAlign: 'center' }}>Static Header Table Demo</h1>
-                <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
-                    {Words.map((el, index) => {
-                        return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: index, w: 1, h: 1, static: el.static }} />
-                    })}
-                </Dragact>
-            </div>
-        </div>
-    )
-}
+// export const SortedTableWithStatic = () => {
+//     return (
+//         <div style={{ display: 'flex', justifyContent: 'center' }}>
+//             <div>
+//                 <h1 style={{ textAlign: 'center' }}>Static Header Table Demo</h1>
+//                 <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
+//                     {Words.map((el, index) => {
+//                         return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: index, w: 1, h: 1, static: el.static }} />
+//                     })}
+//                 </Dragact>
+//             </div>
+//         </div>
+//     )
+// }

src/index.tsx

@@ -1,24 +1,24 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { LayoutDemo } from './NormalLayout/index';
-import { SortedTable } from "./SortedTable/index";
-import { SortedTableWithStatic } from "./StaticHeader/index";
-import { LayoutRestore } from "./LayoutRestore/index";
-import { HandleLayout } from "./HandleLayout/index";
-import { AddRemove } from "./AddRemove/index";
-import { SortableList } from "./SortableList/index";
+// import { SortedTable } from "./SortedTable/index";
+// import { SortedTableWithStatic } from "./StaticHeader/index";
+// import { LayoutRestore } from "./LayoutRestore/index";
+// import { HandleLayout } from "./HandleLayout/index";
+// import { AddRemove } from "./AddRemove/index";
+// import { SortableList } from "./SortableList/index";
 import './index.css'
 
 
 
 const DemoMap: any = {
     normalLayout: <LayoutDemo />,
-    SortedTable: <SortedTable />,
-    StaticHeader: <SortedTableWithStatic />,
-    LayoutRestore: <LayoutRestore />,
-    HandleLayout: <HandleLayout />,
-    AddRemove: <AddRemove />,
-    SortableList: <SortableList />
+    // SortedTable: <SortedTable />,
+    // StaticHeader: <SortedTableWithStatic />,
+    // LayoutRestore: <LayoutRestore />,
+    // HandleLayout: <HandleLayout />,
+    // AddRemove: <AddRemove />,
+    // SortableList: <SortableList />
 }
 
 class DemoDispatcher extends React.Component<{}, {}> {
@@ -39,11 +39,11 @@ class DemoDispatcher extends React.Component<{}, {}> {
                 <div className='demo-button-layout'>
                     <div>Switch Demos</div>
                     <button onClick={() => this.handleLayoutChange('normalLayout')}>normalLayout</button>
-                    <button onClick={() => this.handleLayoutChange('SortedTable')}>SortedTable</button>
+                    {/* <button onClick={() => this.handleLayoutChange('SortedTable')}>SortedTable</button>
                     <button onClick={() => this.handleLayoutChange('StaticHeader')}>StaticHeader</button>
                     <button onClick={() => this.handleLayoutChange('LayoutRestore')}>LayoutRestore</button>
                     <button onClick={() => this.handleLayoutChange('HandleLayout')}>HandleLayout</button>
-                    <button onClick={() => this.handleLayoutChange('AddRemove')}>AddRemove</button>
+                    <button onClick={() => this.handleLayoutChange('AddRemove')}>AddRemove</button> */}
                     {/* <button onClick={() => this.handleLayoutChange('SortableList')}>SortableList</button> */}
                 </div>
                 {this.state.demo}

src/lib/dragact.tsx

@@ -4,8 +4,8 @@ import { compactLayout } from './util/compact';
 import { getMaxContainerHeight } from './util/sort';
 import { layoutCheck } from './util/collison';
 import { correctLayout } from './util/correction';
-import { getDataSet, stringJoin } from './utils';
-import { layoutItemForkey, syncLayout, MapLayoutTostate } from './util/initiate';
+import { stringJoin } from './utils';
+import { layoutItemForkey, syncLayout } from './util/initiate';
 
 import './style.css';
 
@@ -24,7 +24,7 @@ export interface DragactLayoutItem {
 }
 
 export interface DragactProps {
-    layout?: DragactLayoutItem[] //暂时不推荐使用
+    layout: DragactLayoutItem[] //暂时不推荐使用
     /** 
      * 宽度切分比 
      * 这个参数会把容器的宽度平均分为col等份
@@ -82,6 +82,8 @@ export interface DragactProps {
      * layout的名字
     */
     className: number | string
+
+    placeholder?: Boolean
 }
 
 export interface mapLayout {
@@ -109,11 +111,12 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
         this.onDragStart = this.onDragStart.bind(this)
         this.onDragEnd = this.onDragEnd.bind(this)
 
+        // const layout = props.layout ?
+        //     MapLayoutTostate(props.layout, props.children)
+        //     :
+        //     getDataSet(props.children);
 
-        const layout = props.layout ?
-            MapLayoutTostate(props.layout, props.children)
-            :
-            getDataSet(props.children);
+        const layout = props.layout;
 
         this.state = {
             GridXMoving: 0,
@@ -220,9 +223,10 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     }
     renderPlaceholder() {
         if (!this.state.placeholderShow) return null
-        var { col, width, padding, rowHeight, margin } = this.props
+        var { col, width, padding, rowHeight, margin, placeholder } = this.props
         const { GridXMoving, GridYMoving, wMoving, hMoving, placeholderMoving, dragType } = this.state
 
+        if (!placeholder) return null;
         if (!padding) padding = 0;
         return (
             <GridItem
@@ -332,8 +336,9 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     handle={renderItem.handle}
                     canDrag={renderItem.canDrag}
                     canResize={renderItem.canResize}
+                    key={child.key}
                 >
-                    {child}
+                    {this.props.children(child, index)}
                 </GridItem >
             )
         }
@@ -341,7 +346,8 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     render() {
         const {
             width,
-            className
+            className,
+            layout
         } = this.props;
         const { containerHeight } = this.state;
 
@@ -355,9 +361,9 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     zIndex: 1
                 }}
             >
-                {React.Children.map(this.props.children,
-                    (child, index) => this.getGridItem(child, index)
-                )}
+                {layout.map((item, index) => {
+                    return this.getGridItem(item, index)
+                })}
                 {this.renderPlaceholder()}
             </div>
         )