pre-0.1.7

README.md

@@ -1,4 +1,4 @@
-# Dragact
+# Dragact 👋
 [![npm version](https://img.shields.io/npm/v/dragact.svg)](https://www.npmjs.com/package/dragact) [![npm downloads](https://img.shields.io/npm/dm/dragact.svg)](https://www.npmjs.com/package/dragact)
 
 
@@ -7,18 +7,19 @@ Dragact 是一款React组件，他能够使你简单、快速的构建出一款
 ![](https://github.com/215566435/React-dragger-layout/blob/master/example/image/NormalLayoutDemo.gif)
 ![](https://github.com/215566435/React-dragger-layout/blob/master/example/image/resizing.gif)
 
-# Demo地址
+# Demo地址 ✌️
 [Live Demo(预览地址)](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html)
 
-# 特点
+# 特点 
 
 - [x] 自动布局的网格系统
 - [x] 手机上也可以操作
 - [x] 高度自适应
-- [x] 静态组件([Live Demo(预览地址)](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html))
-- [x] 拖拽组件([Live Demo(预览地址)](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html))
+- [x] 静态组件
+- [x] 拖拽组件
 - [x] 自动缩放组件
 - [x] 自定义拖拽把手
+- [x] 自定义缩放把手
 
 
 
@@ -41,9 +42,10 @@ const fakeData = [
     { GridX: 0, GridY: 0, w: 4, h: 2, key: '2' }
 ]
 
-const blockStyle = {
-    background: 'grey',
-    height: '100%'
+const getblockStyle = (isDragging) => {
+    return {
+        background: isDragging ? '#1890ff' : 'white',
+    }
 };
 
 ReactDOM.render(
@@ -54,17 +56,27 @@ ReactDOM.render(
         rowHeight={40}//必填项
         margin={[5, 5]}//必填项
         className='plant-layout'//必填项
-        style={{ background: '#eee' }}//非必填项
+        style={{ background: '#333' }}//非必填项
         placeholder={true}//非必填项
     >
-        {(item, isDragging) => {
-            return <div style={blockStyle}>
-                {isDragging ? '正在抓取' : '停放'}
-            </div>
+        {(item, provided) => {
+            return (
+                <div
+                    {...provided.props}
+                    {...provided.dragHandle}
+                    style={{
+                        ...provided.props.style,
+                        ...getblockStyle(provided.isDragging)
+                    }}
+                >
+                    {provided.isDragging ? '正在抓取' : '停放'}
+                </div>
+            )
         }}
     </Dragact>,
     document.getElementById('root')
 );
+
 ```
 
 
@@ -95,18 +107,27 @@ ReactDOM.render(
 ```jsx
     <Dragact
         layout={fakeData}//必填项
-        ....
+        {...something}
     >
-        {(item, isDragging) => {
-            return <div style={blockStyle}>
-                {isDragging ? '正在抓取' : '停放'}
-            </div>
+        {(item, provided) => {
+            return (
+                <div
+                    {...provided.props}
+                    {...provided.dragHandle}
+                    style={{
+                        ...provided.props.style,
+                        ...getblockStyle(provided.isDragging)
+                    }}
+                >
+                    {provided.isDragging ? '正在抓取' : '停放'}
+                </div>
+            )
         }}
     </Dragact>,
 ```
-现在，我们子元素渲染变成一个小小的**构造函数**，第一个入参是您输入数据的每一项，第二个参数就是**isDragging**，状态监听参数。
+现在，我们子元素渲染变成一个小小的**构造函数**，第一个入参是您输入数据的每一项，第二个参数就是**provided**，提供了所有的拖拽属性。
 
-这么做，轻易的实现了，组件漂亮，不用写map函数，不用写key，同时更容易监听每一个组件的拖拽状态**isDragging**.
+这么做，轻易的实现了，减少组件层级，组件漂亮，不用写map函数，不用写key，同时更容易监听每一个组件的拖拽状态**provided.isDragging**.
 
 更多的依赖注入思想以及好处，请看我的知乎问答：[知乎，方正的回答：如何设计一款组件库](https://www.zhihu.com/question/266745124/answer/322998960)
 
@@ -129,20 +150,15 @@ 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' }
-]
+### 4.滑动中心
+经过不断的努力和尝试，现在所有的widget移动都是依赖重力中心去移动的。
+
+这意味着当我们拖动一个widget的时候更加得心应手和自然。
+
+
+
 
-```
 
-这样的一个设计，略显繁杂，但是起码能够保证了把手的**自定义**，或许在下个版本中我将设计一款高皆组件，使得书写拖拽把手更加轻便简洁。
 
 
 
@@ -153,7 +169,7 @@ const layout = [
 数据属性指的是我们每一个组件所拥有的属性,类似以下的一组数据
 ```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: '0' },
     { GridX: 0, GridY: 0, w: 4, h: 2, key: '1' },
     { GridX: 0, GridY: 0, w: 4, h: 2, key: '2' }
 ]
@@ -163,17 +179,13 @@ GridY:number//必填，挂件布局中的纵坐标
 w:number//必填，挂件布局中宽度，整数
 h:number//必填，挂件布局中高度，整数
 key:number|string//必填，挂件在布局中的唯一id
-canResize:boolean //非必要，能否调整大小的开关
-static:boolean //非必要，静态组件的开关
-canDrag:boolean //非必要，是否能拖拽的开关
-handle:boolean //非必要，是否有拖拽把手的开关
 ```
 
 
 ### 组件属性
 ```ts
-interface DragactProps {
-    layout?: DragactLayout[] //暂时不推荐使用
+export interface DragactProps {
+    layout: DragactLayoutItem[]
     /** 
      * 宽度切分比 
      * 这个参数会把容器的宽度平均分为col等份
@@ -194,7 +206,7 @@ interface DragactProps {
      */
     padding?: number,
 
-    children: any[] | any
+    children: (Item: DragactLayoutItem, provided: GridItemProvided) => any,
 
 
     // 
@@ -220,7 +232,7 @@ interface DragactProps {
     /**
      * 拖动结束的回调
      */
-    onDragEnd?: (key: number | string) => void
+    onDragEnd?: (event: GridItemEvent) => void
 
     /**
      * 每个元素的margin,第一个参数是左右，第二个参数是上下
@@ -231,8 +243,13 @@ interface DragactProps {
      * layout的名字
     */
     className: number | string
-}
 
+    /**是否有placeholder */
+    placeholder?: Boolean
+
+    style?: React.CSSProperties
+
+}
 ```
 
 # Ref Api
@@ -269,11 +286,6 @@ npm run test
 如果你发现了本项目的Bug，请务必马上告诉我。添加一个issue，并且帮忙给出最最简单重现的例子，这能让我快速定位到Bug帮你解决，谢谢！
 
 
+# LICENSE
 
-
-# TODO-LIST
-- [ ] horizontal swaping
-- [x] resizing
-- [x] touch handle
-- [ ] responsive layout
-- [ ] SSR/server rendering 
+MIT

dist/HandleLayout/index.js

@@ -17,12 +17,12 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     return t;
 };
 import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/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: '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.' }
 ];
@@ -34,10 +34,17 @@ var fakeData = function () {
         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 Card = function (_a) {
+    var item = _a.item, provided = _a.provided;
+    var style = { padding: 5, textAlign: 'center', color: '#595959' };
+    if (item.key !== '3') {
+        return (React.createElement("div", __assign({ className: 'layout-Item' }, provided.props, provided.dragHandle),
+            React.createElement("div", { style: style }, item.content)));
+    }
+    return (React.createElement("div", __assign({ className: 'layout-Item' }, provided.props),
+        React.createElement("div", { style: style },
+            item.content,
+            React.createElement("div", __assign({ className: 'card-handle' }, provided.dragHandle), "\u70B9\u6211\u62D6\u52A8"))));
 };
 var HandleLayout = /** @class */ (function (_super) {
     __extends(HandleLayout, _super);
@@ -59,8 +66,8 @@ var HandleLayout = /** @class */ (function (_super) {
             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 });
+                    React.createElement(Dragact, __assign({}, dragactInit), function (item, provided) {
+                        return React.createElement(Card, { item: item, provided: provided });
                     })))));
     };
     return HandleLayout;

dist/LayoutRestore/index.js

@@ -17,7 +17,8 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     return t;
 };
 import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/lib/dragact';
+import { Card } from '../NormalLayout/index';
 import './index.css';
 var Words = [
     { content: 'You can do anything, but not everything.' },
@@ -34,11 +35,6 @@ var fakeData = function () {
         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);
@@ -60,8 +56,8 @@ var LayoutRestore = /** @class */ (function (_super) {
                 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 (React.createElement(Dragact, __assign({}, dragactInit, { ref: function (node) { return node ? _this.dragactNode = node : null; }, onDragEnd: _this.handleOnDragEnd }), function (item, provided) {
+                return React.createElement(Card, { item: item, provided: provided });
             }));
         };
         return _this;

dist/NormalLayout/index.js

@@ -17,7 +17,7 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     return t;
 };
 import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/lib/dragact';
 import { Words } from './largedata';
 import './index.css';
 var fakeData = function () {
@@ -28,14 +28,19 @@ var fakeData = function () {
         return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '' });
     });
 };
-var Card = function (props) {
-    var item = props.item;
-    var isDragging = props.isDragging;
-    return (React.createElement("div", { className: 'layout-Item', style: { background: "" + (isDragging ? '#eaff8f' : 'white') } },
+export var Card = function (_a) {
+    var item = _a.item, provided = _a.provided;
+    return (React.createElement("div", __assign({ className: 'layout-Item' }, provided.props, provided.dragHandle, { style: __assign({}, provided.props.style, { background: "" + (provided.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)));
+            item.content),
+        React.createElement("span", __assign({}, provided.resizeHandle, { style: {
+                position: 'absolute',
+                width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
+                borderRight: '2px solid rgba(15,15,15,0.2)',
+                borderBottom: '2px solid rgba(15,15,15,0.2)'
+            } }))));
 };
 var LayoutDemo = /** @class */ (function (_super) {
     __extends(LayoutDemo, _super);
@@ -60,8 +65,8 @@ var LayoutDemo = /** @class */ (function (_super) {
                 React.createElement("h1", { style: { textAlign: 'center' } }, "\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 });
+                    } }), function (item, provided) {
+                    return React.createElement(Card, { item: item, provided: provided });
                 }))));
     };
     return LayoutDemo;

dist/StaticWidget/index.js

@@ -7,7 +7,7 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     return t;
 };
 import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/lib/dragact';
 import './index.css';
 var Words = [
     { content: 'Sorry I just can not move in any circumstances', static: true },
@@ -24,16 +24,16 @@ var fakeData = function () {
         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)));
+var Cell = function (_a) {
+    var item = _a.item, provided = _a.provided;
+    return (React.createElement("div", __assign({}, provided.props, provided.dragHandle, { className: "layout-Cell " + (item.static ? "static" : ""), style: __assign({}, provided.props.style, { background: item.static ? "#e8e8e8" : "" }) }),
+        React.createElement("div", { style: { padding: 10, 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 });
+            React.createElement(Dragact, { width: 600, col: 16, rowHeight: 30, margin: [2, 2], className: 'normal-layout', layout: fakeData(), placeholder: true }, function (item, provided) {
+                return React.createElement(Cell, { item: item, provided: provided });
             }))));
 };

dist/lib/GridItem.js

@@ -133,11 +133,11 @@ var GridItem = /** @class */ (function (_super) {
             this.props.onDragEnd({ GridX: GridX, GridY: GridY, w: w, h: h, UniqueKey: UniqueKey + '', event: event });
     };
     GridItem.prototype.render = function () {
+        var _this = this;
         var _a = this.props, w = _a.w, h = _a.h, style = _a.style, bounds = _a.bounds, GridX = _a.GridX, GridY = _a.GridY, handle = _a.handle, canDrag = _a.canDrag, canResize = _a.canResize;
         var _b = this.calGridItemPosition(GridX, GridY), x = _b.x, y = _b.y;
         var _c = this.calWHtoPx(w, h), wPx = _c.wPx, hPx = _c.hPx;
-        return (React.createElement(Dragger, { style: __assign({}, style, { width: wPx, height: hPx, position: 'absolute', transition: this.props.isUserMove ? '' : 'all .2s ease-out', zIndex: this.props.isUserMove ? (this.props.dragType === 'drag' ? 10 : 2) : 2 }), onDragStart: this.onDragStart, onMove: this.onDrag, onDragEnd: this.onDragEnd, onResizeStart: this.onResizeStart, onResizing: this.onResizing, onResizeEnd: this.onResizeEnd, x: x, y: y, w: wPx, h: hPx, isUserMove: this.props.isUserMove, bounds: bounds, handle: handle, canDrag: canDrag, canResize: canResize },
-            React.createElement("div", { style: { height: '100%', width: "100%" } }, React.Children.map(this.props.children, function (child) { return child; }))));
+        return (React.createElement(Dragger, { style: __assign({}, style, { width: wPx, height: hPx, position: 'absolute', transition: this.props.isUserMove ? '' : 'all .2s ease-out', zIndex: this.props.isUserMove ? (this.props.dragType === 'drag' ? 10 : 2) : 2 }), onDragStart: this.onDragStart, onMove: this.onDrag, onDragEnd: this.onDragEnd, onResizeStart: this.onResizeStart, onResizing: this.onResizing, onResizeEnd: this.onResizeEnd, x: x, y: y, w: wPx, h: hPx, isUserMove: this.props.isUserMove, bounds: bounds, handle: handle, canDrag: canDrag, canResize: canResize }, function (provided, draggerProps, resizerProps) { return _this.props.children(provided, draggerProps, resizerProps); }));
     };
     GridItem.defaultProps = {
         col: 12,

dist/lib/dragact.js

@@ -87,7 +87,6 @@ var Dragact = /** @class */ (function (_super) {
     Dragact.prototype.onDragStart = function (bundles) {
         var GridX = bundles.GridX, GridY = bundles.GridY, w = bundles.w, h = bundles.h;
         if (this.state.mapLayout) {
-            var newlayout = syncLayout(this.state.mapLayout, bundles);
             this.setState({
                 GridXMoving: GridX,
                 GridYMoving: GridY,
@@ -95,7 +94,7 @@ var Dragact = /** @class */ (function (_super) {
                 hMoving: h,
                 placeholderShow: true,
                 placeholderMoving: true,
-                mapLayout: newlayout,
+                mapLayout: syncLayout(this.state.mapLayout, bundles),
                 dragType: 'drag'
             });
         }
@@ -134,7 +133,7 @@ var Dragact = /** @class */ (function (_super) {
             return null;
         if (!padding)
             padding = 0;
-        return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: GridXMoving, GridY: GridYMoving, w: wMoving, h: hMoving, style: { background: 'rgba(15,15,15,0.3)', zIndex: dragType === 'drag' ? 1 : 10, transition: ' all .15s ease-out' }, isUserMove: !placeholderMoving, dragType: dragType, canDrag: false, canResize: false }));
+        return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: GridXMoving, GridY: GridYMoving, w: wMoving, h: hMoving, style: { background: 'rgba(15,15,15,0.3)', zIndex: dragType === 'drag' ? 1 : 10, transition: ' all .15s ease-out' }, isUserMove: !placeholderMoving, dragType: dragType, canDrag: false, canResize: false }, function (p, resizerProps) { return React.createElement("div", __assign({}, p)); }));
     };
     Dragact.prototype.componentWillReceiveProps = function (nextProps) {
         if (this.props.children.length > nextProps.children.length) {
@@ -195,13 +194,19 @@ var Dragact = /** @class */ (function (_super) {
         }, 1);
     };
     Dragact.prototype.getGridItem = function (child, index) {
+        var _this = this;
         var _a = this.state, dragType = _a.dragType, mapLayout = _a.mapLayout;
         var _b = this.props, col = _b.col, width = _b.width, padding = _b.padding, rowHeight = _b.rowHeight, margin = _b.margin;
         if (mapLayout) {
-            var renderItem = layoutItemForkey(mapLayout, child.key);
+            var renderItem_1 = layoutItemForkey(mapLayout, child.key);
             if (!padding)
                 padding = 0;
-            return (React.createElement(GridItem, __assign({}, renderItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, onDrag: this.onDrag, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, isUserMove: renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false, UniqueKey: child.key, onResizing: this.onResizing, onResizeStart: this.onResizeStart, onResizeEnd: this.onResizeEnd, dragType: dragType, key: child.key }), this.props.children(child, renderItem.isUserMove)));
+            return (React.createElement(GridItem, __assign({}, renderItem_1, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, onDrag: this.onDrag, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, isUserMove: renderItem_1.isUserMove !== void 666 ? renderItem_1.isUserMove : false, UniqueKey: child.key, onResizing: this.onResizing, onResizeStart: this.onResizeStart, onResizeEnd: this.onResizeEnd, dragType: dragType, key: child.key }), function (GridItemProvided, dragHandle, resizeHandle) { return _this.props.children(child, {
+                isDragging: renderItem_1.isUserMove !== void 666 ? renderItem_1.isUserMove : false,
+                props: GridItemProvided,
+                dragHandle: dragHandle,
+                resizeHandle: resizeHandle
+            }); }));
         }
     };
     Dragact.prototype.render = function () {

dist/lib/dragger/index.js

@@ -105,7 +105,7 @@ var Dragger = /** @class */ (function (_super) {
              * 调整手感
              * 无论是向上移动还是向下移动，全部都是根据重力中心
              * */
-            var height = _this.refs['dragger'].getClientRects()[0].height;
+            var height = _this.Ref.getClientRects()[0].height;
             var upNdown = _this.state.y - deltaY;
             var fixY = deltaY + (upNdown >= 0 ? 0 : height / 2);
             /**移动时回调，用于外部控制 */
@@ -119,10 +119,7 @@ var Dragger = /** @class */ (function (_super) {
         _this.onDragStart = function (event) {
             /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
             doc.body.style.userSelect = 'none';
-            if (_this.props.handle) {
-                if (event.target.id !== 'dragact-handle')
-                    return;
-            }
+            // if (event.target.id !== 'dragact-handle') return
             /**
              * 把监听事件的回掉函数，绑定在document上
              * 当设置边界的时候，用户鼠标会离开元素的范围
@@ -233,22 +230,16 @@ var Dragger = /** @class */ (function (_super) {
             _this.props.onResizeEnd && _this.props.onResizeEnd(event, _this.state.w, _this.state.h);
         };
         _this.mixin = function () {
-            var dragMix = {};
-            if (_this.props.canDrag === void 666 || _this.props.canDrag === true) {
-                dragMix = {
-                    onMouseDown: _this.onDragStart,
-                    onTouchStart: _this.onDragStart,
-                    onTouchEnd: _this.onDragEnd,
-                    onMouseUp: _this.onDragEnd
-                };
-            }
-            var resizeMix = {};
-            if (_this.props.canResize === void 666 || _this.props.canDrag === true) {
-                resizeMix = {
-                    onMouseDown: _this.onResizeStart,
-                    onMouseUp: _this.onResizeEnd
-                };
-            }
+            var dragMix = {
+                onMouseDown: _this.onDragStart,
+                onTouchStart: _this.onDragStart,
+                onTouchEnd: _this.onDragEnd,
+                onMouseUp: _this.onDragEnd
+            };
+            var resizeMix = {
+                onMouseDown: _this.onResizeStart,
+                onMouseUp: _this.onResizeEnd
+            };
             return {
                 dragMix: dragMix, resizeMix: resizeMix
             };
@@ -294,6 +285,7 @@ var Dragger = /** @class */ (function (_super) {
         }
     };
     Dragger.prototype.render = function () {
+        var _this = this;
         var _a = this.state, x = _a.x, y = _a.y, w = _a.w, h = _a.h;
         var _b = this.props, style = _b.style, className = _b.className, canResize = _b.canResize;
         if (!this.props.isUserMove) {
@@ -312,16 +304,15 @@ var Dragger = /** @class */ (function (_super) {
         }
         var _c = this.mixin(), dragMix = _c.dragMix, resizeMix = _c.resizeMix;
         /**主要是为了让用户定义自己的className去修改css */
-        var fixedClassName = typeof className === 'undefined' ? '' : className + ' ';
-        return (React.createElement("div", __assign({ className: fixedClassName + "WrapDragger", ref: 'dragger', style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }) }, dragMix),
-            React.Children.only(this.props.children),
-            canResize !== false ?
-                React.createElement("span", __assign({}, resizeMix, { style: {
-                        position: 'absolute',
-                        width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
-                        borderRight: '2px solid rgba(15,15,15,0.2)',
-                        borderBottom: '2px solid rgba(15,15,15,0.2)'
-                    } })) : null));
+        // const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
+        resizeMix;
+        canResize;
+        className;
+        var provided = {
+            style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }),
+            ref: function (node) { return _this.Ref = node; }
+        };
+        return this.props.children(provided, dragMix, resizeMix);
     };
     /**
      * 初始变量设置
@@ -334,3 +325,20 @@ var Dragger = /** @class */ (function (_super) {
     return Dragger;
 }(React.Component));
 export { Dragger };
+// return (
+//     <div className={`${fixedClassName}WrapDragger`}
+//         ref={'dragger'}
+//     >
+//         {this.props.children(provided)}
+//         {canResize !== false ?
+//             <span
+//                 {...resizeMix}
+//                 style={{
+//                     position: 'absolute',
+//                     width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
+//                     borderRight: '2px solid rgba(15,15,15,0.2)',
+//                     borderBottom: '2px solid rgba(15,15,15,0.2)'
+//                 }}
+//             /> : null}
+//     </div>
+// )

dist/mobileLayout/index.js

@@ -17,7 +17,7 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
     return t;
 };
 import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/lib/dragact';
 import { Words } from './largedata';
 import './index.css';
 var fakeData = function () {
@@ -25,13 +25,12 @@ 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: 3, key: index + '', canResize: false });
+        return __assign({}, item, { GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '' });
     });
 };
-var Card = function (props) {
-    var item = props.item;
-    var isDragging = props.isDragging;
-    return (React.createElement("div", { className: 'layout-Item', style: { background: "" + (isDragging ? '#eaff8f' : 'white') } },
+var Card = function (_a) {
+    var item = _a.item, provided = _a.provided;
+    return (React.createElement("div", __assign({ className: 'layout-Item' }, provided.props, provided.dragHandle, { style: __assign({}, provided.props.style, { background: "" + (provided.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)' } }),
@@ -60,8 +59,8 @@ var Mobile = /** @class */ (function (_super) {
                 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 });
+                    } }), function (item, provided) {
+                    return React.createElement(Card, { item: item, provided: provided });
                 }))));
     };
     return Mobile;

example/HandleLayout/index.tsx → src/HandleLayout/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dragact } from '../../src/lib/dragact'
+import { Dragact, DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact'
 
 import './index.css';
 
@@ -62,7 +62,7 @@ export class HandleLayout extends React.Component<{}, {}> {
                     <div>
                         <h1 style={{ textAlign: 'center' }}>拖拽把手 Demo</h1>
                         <Dragact {...dragactInit}  >
-                            {(item: any, provided: any) => {
+                            {(item: DragactLayoutItem, provided: GridItemProvided) => {
                                 return <Card item={item} provided={provided} />
                             }}
                         </Dragact>

src/index.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { LayoutDemo } from '../example/NormalLayout/index';
-import { SortedTableWithStatic } from "../example/StaticWidget/index";
-import { LayoutRestore } from "../example/LayoutRestore/index";
-import { HandleLayout } from "../example/HandleLayout/index";
+import { LayoutDemo } from './NormalLayout/index';
+import { SortedTableWithStatic } from "./StaticWidget/index";
+import { LayoutRestore } from "./LayoutRestore/index";
+import { HandleLayout } from "./HandleLayout/index";
 // import { AddRemove } from "./AddRemove/index";
-import { Mobile } from "../example/mobileLayout/index";
+import { Mobile } from "./mobileLayout/index";
 import './index.css'
+// import { Dragact } from "./lib/dragact";
 
 
 
@@ -49,10 +50,50 @@ class DemoDispatcher extends React.Component<{}, {}> {
     }
 }
 
-<DemoDispatcher />
-
-
-
+{/* <DemoDispatcher />
+
+<Dragact/> */}
+
+// 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 getblockStyle = (isDragging: Boolean) => {
+//     return {
+//         background: isDragging ? '#1890ff' : 'white',
+//     }
+// };
+
+// ReactDOM.render(
+//     <Dragact
+//         layout={fakeData}//必填项
+//         col={16}//必填项
+//         width={800}//必填项
+//         rowHeight={40}//必填项
+//         margin={[5, 5]}//必填项
+//         className='plant-layout'//必填项
+//         style={{ background: '#333' }}//非必填项
+//         placeholder={true}//非必填项
+//     >
+//         {(item: any, provided: any) => {
+//             return (
+//                 <div
+//                     {...provided.props}
+//                     {...provided.dragHandle}
+//                     style={{
+//                         ...provided.props.style,
+//                         ...getblockStyle(provided.isDragging)
+//                     }}
+//                 >
+//                     {provided.isDragging ? '正在抓取' : '停放'}
+//                 </div>
+//             )
+//         }}
+//     </Dragact>,
+//     document.getElementById('root')
+// );
 
 
 

src/lib/dragact.tsx

@@ -24,7 +24,7 @@ export interface DragactLayoutItem {
 }
 
 export interface DragactProps {
-    layout: DragactLayoutItem[] //暂时不推荐使用
+    layout: DragactLayoutItem[]
     /** 
      * 宽度切分比 
      * 这个参数会把容器的宽度平均分为col等份
@@ -45,7 +45,7 @@ export interface DragactProps {
      */
     padding?: number,
 
-    children: any[] | any
+    children: (Item: DragactLayoutItem, provided: GridItemProvided) => any,
 
 
     // 
@@ -87,6 +87,7 @@ export interface DragactProps {
     placeholder?: Boolean
 
     style?: React.CSSProperties
+
 }
 
 export interface mapLayout {
@@ -108,8 +109,9 @@ interface DragactState {
 
 export interface GridItemProvided {
     isDragging: Boolean
-    handle: { id: 'dragact-handle' };
-    draggerProps: any;
+    dragHandle: any;
+    resizeHandle: any;
+    props: any;
 }
 
 export class Dragact extends React.Component<DragactProps, DragactState> {