更新用例，使得移动端也可以用

README.md

@@ -130,12 +130,48 @@ ReactDOM.render(
 通过获取dragact组件的实例，我提供了一个api ```getLayout():DragactLayout;```，用于获取当前的**布局信息**。
 
 
+### 4.拖拽把手的设计
+设计一个拖拽把手，必须要两个步骤。
+1. 挂件中拖拽把手拥有一个```id='dragact-handle'```的html tag（```<div id='dragact-handle'>我是把手</div>```);
+2. 在数据中标记是否存在把手
+```ts
+const layout = [
+    { GridX: 0, GridY: 0, w: 4, h: 2, key: '0',handle:true },
+    { GridX: 0, GridY: 0, w: 4, h: 2, key: '1' },
+    { GridX: 0, GridY: 0, w: 4, h: 2, key: '2' }
+]
 
+```
+
+这样的一个设计，略显繁杂，但是起码能够保证了把手的**自定义**，或许在下个版本中我将设计一款高皆组件，使得书写拖拽把手更加轻便简洁。
 
 
 
 
 # Dragact 提供的属性
+
+### 数据属性
+数据属性指的是我们每一个组件所拥有的属性,类似以下的一组数据
+```ts
+const layout = [
+    { GridX: 0, GridY: 0, w: 4, h: 2, key: '0',canResize:false,static:true,canDrag:false,handle:true },
+    { GridX: 0, GridY: 0, w: 4, h: 2, key: '1' },
+    { GridX: 0, GridY: 0, w: 4, h: 2, key: '2' }
+]
+
+GridX:number//必填，挂件布局中的横坐标
+GridY:number//必填，挂件布局中的纵坐标
+w:number//必填，挂件布局中宽度，整数
+h:number//必填，挂件布局中高度，整数
+key:number|string//必填，挂件在布局中的唯一id
+canResize:boolean //非必要，能否调整大小的开关
+static:boolean //非必要，静态组件的开关
+canDrag:boolean //非必要，是否能拖拽的开关
+handle:boolean //非必要，是否有拖拽把手的开关
+```
+
+
+### 组件属性
 ```ts
 interface DragactProps {
     layout?: DragactLayout[] //暂时不推荐使用

dist/HandleLayout/index.js

@@ -1,70 +1,68 @@
-"use strict";
-// 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 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]
-//     }
-//     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>
-//         )
-//     }
-// }
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+import * as React from 'react';
+import { Dragact } from '../lib/dragact';
+import './index.css';
+var Words = [
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.', handle: true },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' }
+];
+var fakeData = function () {
+    var Y = 0;
+    return Words.map(function (item, index) {
+        if (index % 4 === 0)
+            Y++;
+        return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 2, key: index + '' });
+    });
+};
+var Card = function (props) {
+    var item = props.item;
+    return (React.createElement("div", { className: 'layout-Item' },
+        React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } }, item.handle ? React.createElement("div", { className: 'card-handle', id: "dragact-handle" }, "\u70B9\u6211\u62D6\u52A8") : item.content)));
+};
+var HandleLayout = /** @class */ (function (_super) {
+    __extends(HandleLayout, _super);
+    function HandleLayout() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    HandleLayout.prototype.render = function () {
+        var margin = [5, 5];
+        var dragactInit = {
+            width: 600,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            className: 'normal-layout',
+            layout: fakeData(),
+            placeholder: true
+        };
+        return (React.createElement("div", null,
+            React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+                React.createElement("div", null,
+                    React.createElement("h1", { style: { textAlign: 'center' } }, "\u62D6\u62FD\u628A\u624B Demo"),
+                    React.createElement(Dragact, __assign({}, dragactInit), function (item, isDragging) {
+                        return React.createElement(Card, { item: item });
+                    })))));
+    };
+    return HandleLayout;
+}(React.Component));
+export { HandleLayout };

dist/LayoutRestore/index.js

@@ -1,77 +1,83 @@
-"use strict";
-// import * as React from 'react';
-// import { Dragact } from '../lib/dragact'
-// import './index.css';
-// 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 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);
-//         localStorage.setItem('layout', parsedLayout);
-//     }
-//     componentWillMount() {
-//         const lastLayout = localStorage.getItem('layout');
-//         if (lastLayout) {
-//             storeLayout = JSON.parse(lastLayout);
-//         }
-//     }
-//     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'
-//         }
-//         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>
-//         )
-//     }
-// }
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+import * as React from 'react';
+import { Dragact } from '../lib/dragact';
+import './index.css';
+var Words = [
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' }
+];
+var fakeData = function () {
+    var Y = 0;
+    return Words.map(function (item, index) {
+        if (index % 4 === 0)
+            Y++;
+        return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 2, key: index + '' });
+    });
+};
+var Card = function (props) {
+    var item = props.item;
+    return (React.createElement("div", { className: 'layout-Item' },
+        React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } }, item.content)));
+};
+var storeLayout = void 666;
+var LayoutRestore = /** @class */ (function (_super) {
+    __extends(LayoutRestore, _super);
+    function LayoutRestore() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleOnDragEnd = function () {
+            var newLayout = _this.dragactNode.getLayout();
+            var parsedLayout = JSON.stringify(newLayout);
+            localStorage.setItem('layout', parsedLayout);
+        };
+        _this.renderDragact = function () {
+            var margin = [5, 5];
+            var dragactInit = {
+                width: 600,
+                col: 12,
+                rowHeight: 800 / 12,
+                margin: margin,
+                className: 'normal-layout',
+                layout: storeLayout ? storeLayout : fakeData(),
+                placeholder: true
+            };
+            return (React.createElement(Dragact, __assign({}, dragactInit, { ref: function (node) { return node ? _this.dragactNode = node : null; }, onDragEnd: _this.handleOnDragEnd }), function (item) {
+                return React.createElement(Card, { item: item });
+            }));
+        };
+        return _this;
+    }
+    LayoutRestore.prototype.componentWillMount = function () {
+        var lastLayout = localStorage.getItem('layout');
+        if (lastLayout) {
+            storeLayout = JSON.parse(lastLayout);
+        }
+    };
+    LayoutRestore.prototype.render = function () {
+        return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+            React.createElement("div", null,
+                React.createElement("h1", { style: { textAlign: 'center' } }, "\u5B58\u50A8\u5E03\u5C40 Demo"),
+                this.renderDragact())));
+    };
+    return LayoutRestore;
+}(React.Component));
+export { LayoutRestore };

dist/NormalLayout/index.js

@@ -25,7 +25,7 @@ var fakeData = function () {
     return Words.map(function (item, index) {
         if (index % 4 === 0)
             Y++;
-        return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 2, key: index + '' });
+        return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '' });
     });
 };
 var Card = function (props) {
@@ -45,7 +45,7 @@ var LayoutDemo = /** @class */ (function (_super) {
     LayoutDemo.prototype.render = function () {
         var margin = [5, 5];
         var dragactInit = {
-            width: 1200,
+            width: 600,
             col: 16,
             rowHeight: 40,
             margin: margin,
@@ -57,7 +57,7 @@ var LayoutDemo = /** @class */ (function (_super) {
                 justifyContent: 'center'
             } },
             React.createElement("div", null,
-                React.createElement("h1", { style: { textAlign: 'center' } }, "Normal Layout Demo"),
+                React.createElement("h1", { style: { textAlign: 'center' } }, "\u666E\u901A\u5E03\u5C40demo"),
                 React.createElement(Dragact, __assign({}, dragactInit, { placeholder: true, style: {
                         background: '#003A8C'
                     } }), function (item, isDragging) {

dist/NormalLayout/largedata.js

@@ -18,17 +18,7 @@ export var Words = [
     { content: 'Those who dare to fail miserably can achieve greatly.' },
     { content: 'You miss 100 percent of the shots you never take.' },
     { content: 'Those who believe in telekinetics, raise my hand.' },
-    { content: 'I’d rather live with a good question than a bad answer.' },
-    { content: 'You can do anything, but not everything.' },
-    { content: 'Those who dare to fail miserably can achieve greatly.' },
-    { content: 'You miss 100 percent of the shots you never take.' },
-    { content: 'Those who believe in telekinetics, raise my hand.' },
-    { content: 'I’d rather live with a good question than a bad answer.' },
-    { content: 'You can do anything, but not everything.' },
-    { content: 'Those who dare to fail miserably can achieve greatly.' },
     { content: 'You miss 100 percent of the shots you never take.' },
-    { content: 'Those who believe in telekinetics, raise my hand.' },
-    { content: 'I’d rather live with a good question than a bad answer.' },
     { content: 'You can do anything, but not everything.' },
     { content: 'Those who dare to fail miserably can achieve greatly.' },
     { content: 'You miss 100 percent of the shots you never take.' },
@@ -37,6 +27,5 @@ export var Words = [
     { content: 'You can do anything, but not everything.' },
     { content: 'Those who dare to fail miserably can achieve greatly.' },
     { content: 'You miss 100 percent of the shots you never take.' },
-    { content: 'You can do anything, but not everything.' },
-    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' }
 ];

dist/StaticWidget/index.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+import * as React from 'react';
+import { Dragact } from '../lib/dragact';
+import './index.css';
+var Words = [
+    { content: 'Sorry I just can not move in any circumstances', static: true },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Sorry I just can not move in any circumstances,too' },
+    { content: 'I’d rather live with a good question than a bad answer.' }
+];
+var fakeData = function () {
+    var Y = 0;
+    return Words.map(function (item, index) {
+        if (index % 4 === 0)
+            Y++;
+        return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 4, key: index + '', canResize: false });
+    });
+};
+var Cell = function (props) {
+    var item = props.item;
+    return (React.createElement("div", { className: "layout-Cell " + (item.static ? "static" : ""), style: { background: item.static ? "#e8e8e8" : "" } },
+        React.createElement("div", { style: { paddingLeft: 12, color: '#595959' } }, item.content)));
+};
+export var SortedTableWithStatic = function () {
+    return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+        React.createElement("div", null,
+            React.createElement("h1", { style: { textAlign: 'center' } }, "\u9759\u6001\u7EC4\u4EF6 Demo"),
+            React.createElement(Dragact, { width: 600, col: 16, rowHeight: 30, margin: [2, 2], className: 'normal-layout', layout: fakeData(), placeholder: true }, function (item, isDragging) {
+                return React.createElement(Cell, { item: item });
+            }))));
+};

dist/index.js

@@ -11,16 +11,20 @@ var __extends = (this && this.__extends) || (function () {
 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 { SortedTableWithStatic } from "./StaticWidget/index";
+import { LayoutRestore } from "./LayoutRestore/index";
+import { HandleLayout } from "./HandleLayout/index";
 // import { AddRemove } from "./AddRemove/index";
-// import { SortableList } from "./SortableList/index";
+import { Mobile } from "./mobileLayout/index";
 import './index.css';
-import { Dragact } from "./lib/dragact";
 var DemoMap = {
     normalLayout: React.createElement(LayoutDemo, null),
+    // SortedTable: <SortedTable />,
+    StaticHeader: React.createElement(SortedTableWithStatic, null),
+    LayoutRestore: React.createElement(LayoutRestore, null),
+    HandleLayout: React.createElement(HandleLayout, null),
+    // AddRemove: <AddRemove />,
+    Mobile: React.createElement(Mobile, null)
 };
 var DemoDispatcher = /** @class */ (function (_super) {
     __extends(DemoDispatcher, _super);
@@ -39,23 +43,17 @@ var DemoDispatcher = /** @class */ (function (_super) {
     DemoDispatcher.prototype.render = function () {
         var _this = this;
         return (React.createElement("div", null,
+            React.createElement("div", null, "\u5207\u6362 Demos"),
             React.createElement("div", { className: 'demo-button-layout' },
-                React.createElement("div", null, "Switch Demos"),
-                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('normalLayout'); } }, "normalLayout")),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('normalLayout'); } }, "\u666E\u901A\u5E03\u5C40"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('StaticHeader'); } }, "\u9759\u6001\u7EC4\u4EF6"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('LayoutRestore'); } }, "\u5B58\u50A8\u5E03\u5C40"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('HandleLayout'); } }, "\u62D6\u62FD\u628A\u624B"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('Mobile'); } }, "\u79FB\u52A8\u7AEF")),
             this.state.demo));
     };
     return DemoDispatcher;
 }(React.Component));
 React.createElement(DemoDispatcher, null);
-var fakeData = [
-    { GridX: 0, GridY: 0, w: 4, h: 2, key: '0' },
-    { GridX: 0, GridY: 0, w: 4, h: 2, key: '1' },
-    { GridX: 0, GridY: 0, w: 4, h: 2, key: '2' }
-];
-var blockStyle = {
-    background: 'grey',
-    height: '100%'
-};
-ReactDOM.render(React.createElement(Dragact, { layout: fakeData, col: 16, width: 800, rowHeight: 40, margin: [5, 5], className: 'plant-layout', style: { background: '#eee' }, placeholder: true }, function (item, isDragging) {
-    return React.createElement("div", { style: blockStyle }, isDragging ? '正在抓取' : '停放');
-}), document.getElementById('root'));
+ReactDOM.render(React.createElement(DemoDispatcher, null), document.getElementById('root'));
+document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

dist/mobileLayout/index.js

@@ -0,0 +1,69 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+import * as React from 'react';
+import { Dragact } from '../lib/dragact';
+import { Words } from './largedata';
+import './index.css';
+var fakeData = function () {
+    var Y = 0;
+    return Words.map(function (item, index) {
+        if (index % 4 === 0)
+            Y++;
+        return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '', canResize: false });
+    });
+};
+var Card = function (props) {
+    var item = props.item;
+    var isDragging = props.isDragging;
+    return (React.createElement("div", { className: 'layout-Item', style: { background: "" + (isDragging ? '#eaff8f' : 'white') } },
+        React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } },
+            React.createElement("span", null, "title"),
+            React.createElement("div", { style: { borderBottom: '1px solid rgba(120,120,120,0.1)' } }),
+            item.content)));
+};
+var Mobile = /** @class */ (function (_super) {
+    __extends(Mobile, _super);
+    function Mobile() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Mobile.prototype.render = function () {
+        var margin = [5, 5];
+        var dragactInit = {
+            width: 500,
+            col: 16,
+            rowHeight: 45,
+            margin: margin,
+            className: 'normal-layout',
+            layout: fakeData()
+        };
+        return (React.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'center'
+            } },
+            React.createElement("div", null,
+                React.createElement("h1", { style: { textAlign: 'center' } }, "\u624B\u673A\u666E\u901A\u5E03\u5C40demo"),
+                React.createElement(Dragact, __assign({}, dragactInit, { placeholder: true, style: {
+                        background: '#003A8C'
+                    } }), function (item, isDragging) {
+                    return React.createElement(Card, { item: item, isDragging: isDragging });
+                }))));
+    };
+    return Mobile;
+}(React.Component));
+export { Mobile };

dist/mobileLayout/largedata.js

@@ -0,0 +1,22 @@
+export var Words = [
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' },
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' },
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' },
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'You miss 100 percent of the shots you never take.' }
+];

src/HandleLayout/index.tsx

@@ -1,77 +1,64 @@
-// 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.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.', handle: true },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' }
+]
 
+const fakeData = () => {
+    var Y = 0;
+    return Words.map((item, index) => {
+        if (index % 4 === 0) Y++;
+        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 2, key: index + '' }
+    })
+}
 
-// 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;
+    return (
+        <div className='layout-Item' >
+            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>
+                {item.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]
-//     }
 
-//     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]
-//         })
-//     }
+export class HandleLayout extends React.Component<{}, {}> {
 
-//     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: 600,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            className: 'normal-layout',
+            layout: fakeData(),
+            placeholder: true
+        }
+        return (
+            <div>
+                <div style={{ display: 'flex', justifyContent: 'center' }} >
+                    <div>
+                        <h1 style={{ textAlign: 'center' }}>拖拽把手 Demo</h1>
+                        <Dragact {...dragactInit}  >
+                            {(item: any, isDragging: Boolean) => {
+                                return <Card item={item} />
+                            }}
+                        </Dragact>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

src/LayoutRestore/index.tsx

@@ -1,88 +1,86 @@
-// 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: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' }
+]
 
-// 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 fakeData = () => {
+    var Y = 0;
 
+    return Words.map((item, index) => {
+        if (index % 4 === 0) Y++;
+        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 2, key: index + '' }
+    })
+}
 
-// 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 = props.item;
+    return (
+        <div className='layout-Item'>
+            <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);
 
-//         localStorage.setItem('layout', parsedLayout);
-//     }
-//     componentWillMount() {
-//         const lastLayout = localStorage.getItem('layout');
-//         if (lastLayout) {
-//             storeLayout = JSON.parse(lastLayout);
-//         }
-//     }
+var storeLayout: any = void 666;
+export class LayoutRestore extends React.Component<{}, {}> {
+    dragactNode: Dragact;
+    handleOnDragEnd = () => {
+        const newLayout = this.dragactNode.getLayout();
+        const parsedLayout = JSON.stringify(newLayout);
 
-//     getLayoutItemForKey(key: string) {
-//         return storeLayout[key]
-//     }
+        localStorage.setItem('layout', parsedLayout);
+    }
+    componentWillMount() {
+        const lastLayout = localStorage.getItem('layout');
+        if (lastLayout) {
+            storeLayout = JSON.parse(lastLayout);
+        }
+    }
 
-//     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: 600,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            className: 'normal-layout',
+            layout: storeLayout ? storeLayout : fakeData(),
+            placeholder: true
+        }
 
-//         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}
 
-//     render() {
-//         return (
-//             <div style={{ display: 'flex', justifyContent: 'center' }}>
-//                 <div>
-//                     <h1 style={{ textAlign: 'center' }}>Layout Restore Demo</h1>
-//                     {this.renderDragact()}
-//                 </div>
-//             </div>
-//         )
-//     }
-// }
+            >
+                {(item: any) => {
+                    return <Card item={item} />
+                }}
+            </Dragact>
+        )
+    }
+
+    render() {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <div>
+                    <h1 style={{ textAlign: 'center' }}>存储布局 Demo</h1>
+                    {this.renderDragact()}
+                </div>
+            </div>
+        )
+    }
+}

src/NormalLayout/index.tsx

@@ -16,7 +16,7 @@ const fakeData = () => {
     return Words.map((item, index) => {
         if (index % 4 === 0) Y++;
 
-        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 2, key: index + '' }
+        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '' }
     })
 }
 
@@ -44,7 +44,7 @@ export class LayoutDemo extends React.Component<{}, {}> {
     render() {
         const margin: [number, number] = [5, 5];
         const dragactInit = {
-            width: 1200,
+            width: 600,
             col: 16,
             rowHeight: 40,
             margin: margin,
@@ -60,7 +60,7 @@ export class LayoutDemo extends React.Component<{}, {}> {
             >
                 <div>
                     <h1 style={{ textAlign: 'center' }}>
-                        Normal Layout Demo
+                        普通布局demo
                     </h1>
                     <Dragact
                         {...dragactInit}

src/NormalLayout/largedata.ts

@@ -18,17 +18,7 @@ export const Words = [
     { content: 'Those who dare to fail miserably can achieve greatly.' },
     { content: 'You miss 100 percent of the shots you never take.' },
     { content: 'Those who believe in telekinetics, raise my hand.' },
-    { content: 'I’d rather live with a good question than a bad answer.' },
-    { content: 'You can do anything, but not everything.' },
-    { content: 'Those who dare to fail miserably can achieve greatly.' },
-    { content: 'You miss 100 percent of the shots you never take.' },
-    { content: 'Those who believe in telekinetics, raise my hand.' },
-    { content: 'I’d rather live with a good question than a bad answer.' },
-    { content: 'You can do anything, but not everything.' },
-    { content: 'Those who dare to fail miserably can achieve greatly.' },
     { content: 'You miss 100 percent of the shots you never take.' },
-    { content: 'Those who believe in telekinetics, raise my hand.' },
-    { content: 'I’d rather live with a good question than a bad answer.' },
     { content: 'You can do anything, but not everything.' },
     { content: 'Those who dare to fail miserably can achieve greatly.' },
     { content: 'You miss 100 percent of the shots you never take.' },
@@ -37,7 +27,5 @@ export const Words = [
     { content: 'You can do anything, but not everything.' },
     { content: 'Those who dare to fail miserably can achieve greatly.' },
     { content: 'You miss 100 percent of the shots you never take.' },
-    { content: 'You can do anything, but not everything.' },
-    { content: 'Those who dare to fail miserably can achieve greatly.' },
-
+    { content: 'Those who believe in telekinetics, raise my hand.' }
 ]

src/SortableList/index.tsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import { DragactList } from '../lib/dragactList/dragactList';
-
-
-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' style={{ width: 400, height: 50, border: '1px solid black' }}>
-            <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 dataList = [
-    { y: 0, ...Words[0], key: '0' },
-    { y: 1, ...Words[1], key: '1' },
-    { y: 2, ...Words[2], key: '2' },
-    { y: 3, ...Words[3], key: '3' }
-]
-
-const dataList2 = [
-    { y: 0, ...Words[0], key: '100' },
-    { y: 1, ...Words[1], key: '101' },
-    { y: 2, ...Words[2], key: '201' },
-    { y: 3, ...Words[3], key: '301' }
-]
-
-
-
-export class SortableList extends React.Component<{}, {}> {
-    one: DragactList | null;
-    two: DragactList | null;
-
-
-
-
-    render() {
-        const list = [dataList, dataList2];
-
-        return (
-            <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <div>
-                    <h1 style={{ textAlign: 'center' }}>Sort list Demo</h1>
-                    <DragactList
-                        layout={list}
-                        width={450}
-                        rowHeight={60}
-                        margin={[50, 5]}
-                        className='normal-layout'
-                        ref={node => this.one = node}
-                    >
-                        {(child: any, index: number) => {
-                            return <Cell item={child} />
-                        }}
-                    </DragactList>
-                </div>
-            </div>
-        )
-    }
-
-}
-

src/SortedTable/index.css

@@ -1,11 +0,0 @@
-.layout-Cell>img {
-    border-radius: 5px;
-}
-
-.layout-Cell {
-    background: white;
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding-left: 12px;
-}

src/SortedTable/index.tsx

@@ -1,41 +0,0 @@
-// 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 +0,0 @@
-// 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 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>
-//     )
-// }

src/StaticWidget/index.tsx

@@ -0,0 +1,52 @@
+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', static: true },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Sorry I just can not move in any circumstances,too' },
+    { content: 'I’d rather live with a good question than a bad answer.' }
+]
+
+const fakeData = () => {
+    var Y = 0;
+    return Words.map((item, index) => {
+        if (index % 4 === 0) Y++;
+
+        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 4, key: index + '', canResize: false }
+    })
+}
+
+const Cell = (props: any) => {
+    const { item } = props;
+    return (
+        <div className={`layout-Cell ${item.static ? "static" : ""}`} style={{ background: item.static ? "#e8e8e8" : "" }}>
+            <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' }}>静态组件 Demo</h1>
+                <Dragact
+                    width={600}
+                    col={16}
+                    rowHeight={30}
+                    margin={[2, 2]}
+                    className='normal-layout'
+                    layout={fakeData()}
+                    placeholder={true}
+                >
+                    {(item: any, isDragging: number) => {
+                        return <Cell item={item} />
+                    }}
+                </Dragact>
+            </div>
+        </div>
+    )
+}

src/index.css

@@ -1,8 +1,7 @@
 .demo-button-layout {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     width: 120px;
-    position: fixed;
 }
 
 .demo-button-layout>button {
@@ -11,6 +10,7 @@
     margin-top: 2px;
     border-radius: 5px;
     border: 1pt solid #1890ff;
+    margin-left: 20px;
 }
 
 body {

src/index.tsx

@@ -1,25 +1,23 @@
 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 { SortedTableWithStatic } from "./StaticWidget/index";
+import { LayoutRestore } from "./LayoutRestore/index";
+import { HandleLayout } from "./HandleLayout/index";
 // import { AddRemove } from "./AddRemove/index";
-// import { SortableList } from "./SortableList/index";
+import { Mobile } from "./mobileLayout/index";
 import './index.css'
-import { Dragact } from "./lib/dragact";
 
 
 
 const DemoMap: any = {
     normalLayout: <LayoutDemo />,
     // SortedTable: <SortedTable />,
-    // StaticHeader: <SortedTableWithStatic />,
-    // LayoutRestore: <LayoutRestore />,
-    // HandleLayout: <HandleLayout />,
+    StaticHeader: <SortedTableWithStatic />,
+    LayoutRestore: <LayoutRestore />,
+    HandleLayout: <HandleLayout />,
     // AddRemove: <AddRemove />,
-    // SortableList: <SortableList />
+    Mobile: <Mobile />
 }
 
 class DemoDispatcher extends React.Component<{}, {}> {
@@ -37,15 +35,13 @@ class DemoDispatcher extends React.Component<{}, {}> {
     render() {
         return (
             <div>
+                <div>切换 Demos</div>
                 <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('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('SortableList')}>SortableList</button> */}
+                    <button onClick={() => this.handleLayoutChange('normalLayout')}>普通布局</button>
+                    <button onClick={() => this.handleLayoutChange('StaticHeader')}>静态组件</button>
+                    <button onClick={() => this.handleLayoutChange('LayoutRestore')}>存储布局</button>
+                    <button onClick={() => this.handleLayoutChange('HandleLayout')}>拖拽把手</button>
+                    <button onClick={() => this.handleLayoutChange('Mobile')}>移动端</button>
                 </div>
                 {this.state.demo}
             </div>
@@ -56,33 +52,14 @@ class DemoDispatcher extends React.Component<{}, {}> {
 <DemoDispatcher />
 
 
-const fakeData = [
-    { GridX: 0, GridY: 0, w: 4, h: 2, key: '0' },
-    { GridX: 0, GridY: 0, w: 4, h: 2, key: '1' },
-    { GridX: 0, GridY: 0, w: 4, h: 2, key: '2' }
-]
 
-const blockStyle = {
-    background: 'grey',
-    height: '100%'
-};
+
+
 
 ReactDOM.render(
-    <Dragact
-        layout={fakeData}
-        col={16}
-        width={800}
-        rowHeight={40}
-        margin={[5, 5]}
-        className='plant-layout'
-        style={{ background: '#eee' }}
-        placeholder={true}
-    >
-        {(item: any, isDragging: Boolean) => {
-            return <div style={blockStyle}>
-                {isDragging ? '正在抓取' : '停放'}
-            </div>
-        }}
-    </Dragact>,
+    <DemoDispatcher />,
     document.getElementById('root')
-);
+);
+
+
+document.addEventListener('touchmove', function (e) { e.preventDefault() }, false);

src/mobileLayout/index.css

@@ -0,0 +1,13 @@
+.layout-Item {
+    background: white;
+    height: 100%;
+    border-radius: 3px;
+}
+
+.layout-item:hover {
+    cursor: -webkit-grab;
+}
+
+.normal-layout {
+    background: #d9d9d9;
+}

src/mobileLayout/index.tsx

@@ -0,0 +1,83 @@
+import *as React from 'react';
+import { Dragact, DragactLayoutItem } from '../lib/dragact'
+import { Words } from './largedata'
+import './index.css';
+
+
+interface CardItem {
+    content: string,
+    img: string
+}
+
+
+
+const fakeData = () => {
+    var Y = 0;
+    return Words.map((item, index) => {
+        if (index % 4 === 0) Y++;
+
+        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '', canResize: false }
+    })
+}
+
+
+const Card = (props: any) => {
+    const item: CardItem = props.item;
+    const isDragging: Boolean = props.isDragging;
+    return (
+        <div
+            className='layout-Item'
+            style={{ background: `${isDragging ? '#eaff8f' : 'white'}` }}>
+            <div
+                style={{ padding: 5, textAlign: 'center', color: '#595959' }}
+            >
+                <span>title</span>
+                <div style={{ borderBottom: '1px solid rgba(120,120,120,0.1)' }} />
+                {item.content}
+            </div>
+        </div>
+    )
+}
+
+
+export class Mobile extends React.Component<{}, {}> {
+    render() {
+        const margin: [number, number] = [5, 5];
+        const dragactInit = {
+            width: 500,
+            col: 16,
+            rowHeight: 45,
+            margin: margin,
+            className: 'normal-layout',
+            layout: fakeData()
+        }
+        return (
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center'
+                }}
+            >
+                <div>
+                    <h1 style={{ textAlign: 'center' }}>
+                        手机普通布局demo
+                    </h1>
+                    <Dragact
+                        {...dragactInit}
+                        placeholder={true}
+                        style={{
+                            background: '#003A8C'
+                        }}
+                    >
+                        {(item: DragactLayoutItem, isDragging: Boolean) => {
+                            return <Card
+                                item={item}
+                                isDragging={isDragging}
+                            />
+                        }}
+                    </Dragact>
+                </div>
+            </div>
+        )
+    }
+}

src/mobileLayout/largedata.ts

@@ -0,0 +1,22 @@
+export const Words = [
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' },
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' },
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'I’d rather live with a good question than a bad answer.' },
+    { content: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+    { content: 'You miss 100 percent of the shots you never take.' },
+    { content: 'Those who believe in telekinetics, raise my hand.' },
+    { content: 'You miss 100 percent of the shots you never take.' }
+]