readme update ,add simple demo

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)
 
 
@@ -18,6 +18,9 @@ Dragact 是一款React组件，他能够使你简单、快速的构建出一款
 - [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] 性能优异，200个挂件依然有良好的表现
+- [x] 自定义拖拽把手
+
 
 
 # 快速开始
@@ -25,16 +28,53 @@ Dragact 是一款React组件，他能够使你简单、快速的构建出一款
 npm install --save dragact
 ```
 
-### 写一个例子🌰
+### 最简单的例子🌰
 ```javascript
 //index.js
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 import { Dragact } from 'dragact';
-import './index.css'
+
+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, isDragging) => {
+            return <div style={blockStyle}>
+                {isDragging ? '正在抓取' : '停放'}
+            </div>
+        }}
+    </Dragact>,
+    document.getElementById('root')
+);
+```
+
+
+# 组件设计哲学
+
+### 1.依赖注入式的挂件(widget)
+
+可以从最简单的例子看出，我们渲染子组件的方式和以往有些不同。以往的React组件书写方式，采用的是类似以下写法：
+```jsx
     <Dragact
         col={8}
         width={800}
@@ -46,23 +86,51 @@ ReactDOM.render(
         <div key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className='layout-child'>1</div>
         <div key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className='layout-child'>2</div>
     </Dragact>,
-    document.getElementById('root')
-);
 ```
+这么做当然可以，但是有几个问题：
+- 子组件非常的丑，需要我们定义一大堆东西
+- 很难监听到子组件的事件，比如是否拖拽等
+- 如果有大量的数据时，就必须写对数组写一个map函数，类似:``layout.map(item=>item);`` 来帮助渲染数组
 
-```css
-/** index.css */
-.plant-layout {
-    border: 1px solid black;
-}
-.layout-child {
-    height: 100%;
-    background: #ef4;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+为了解决这个问题，我将子组件的渲染方式进行高度抽象成为一个**构造器**，简单来说就是以下的形式：
+```jsx
+    <Dragact
+        layout={fakeData}//必填项
+        ....
+    >
+        {(item, isDragging) => {
+            return <div style={blockStyle}>
+                {isDragging ? '正在抓取' : '停放'}
+            </div>
+        }}
+    </Dragact>,
 ```
+现在，我们子元素渲染变成一个小小的**构造函数**，第一个入参是您输入数据的每一项，第二个参数就是**isDragging**，状态监听参数。
+
+这么做，轻易的实现了，组件漂亮，不用写map函数，不用写key，同时更容易监听每一个组件的拖拽状态**isDragging**.
+
+更多的依赖注入思想以及好处，请看我的知乎问答：[知乎，方正的回答：如何设计一款组件库](https://www.zhihu.com/question/266745124/answer/322998960)
+
+
+### 2.流畅的组件滑动
+
+为了保证拖拽时候的手感舒适，我通过设置元素的translate(x,y)来进行实现，并且配合CSS动画，使得每一步的移动都是那么的顺畅。
+
+你能够很轻易的看到每一个组件到底滑向哪里，到底坐落在哪里。
+
+
+### 3.数据驱动的模式
+
+>视图的改变就是数据的改变
+
+这是React给我们的一个启示，Dragact组件通过对数据的处理，达到了数据变化即视图变化。
+
+这么做的好处就是我们可以轻松的**将布局信息记录在服务器的数据库中**，下一次拿到数据的时候，就可以轻松的**恢复原来的视图位置**。
+
+通过获取dragact组件的实例，我提供了一个api ```getLayout():DragactLayout;```，用于获取当前的**布局信息**。
+
+
+
 
 
 

dist/NormalLayout/index.js

@@ -18,17 +18,14 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
 };
 import * as React from 'react';
 import { Dragact } from '../lib/dragact';
+import { Words } from './largedata';
 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) {
-        return __assign({}, item, { GridX: index * 2, GridY: 0, w: 4, h: 2, key: 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) {

dist/NormalLayout/largedata.js

@@ -0,0 +1,42 @@
+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: '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: '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: 'You can do anything, but not everything.' },
+    { content: 'Those who dare to fail miserably can achieve greatly.' },
+];

dist/index.js

@@ -18,6 +18,7 @@ import { LayoutDemo } from './NormalLayout/index';
 // import { AddRemove } from "./AddRemove/index";
 // import { SortableList } from "./SortableList/index";
 import './index.css';
+import { Dragact } from "./lib/dragact";
 var DemoMap = {
     normalLayout: React.createElement(LayoutDemo, null),
 };
@@ -45,4 +46,16 @@ var DemoDispatcher = /** @class */ (function (_super) {
     };
     return DemoDispatcher;
 }(React.Component));
-ReactDOM.render(React.createElement(DemoDispatcher, null), document.getElementById('root'));
+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'));

dist/lib/GridItem.js

@@ -136,6 +136,7 @@ var GridItem = /** @class */ (function (_super) {
         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;
+        console.log('渲染');
         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; }))));
     };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragact",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "",
   "main": "index.js",
   "scripts": {

src/NormalLayout/index.tsx

@@ -12,8 +12,11 @@ interface CardItem {
 
 
 const fakeData = () => {
+    var Y = 0;
     return Words.map((item, index) => {
-        return { ...item, GridX: 2, GridY: index * 2, w: 4, h: 2, key: index + '' }
+        if (index % 4 === 0) Y++;
+
+        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 2, key: index + '' }
     })
 }
 

src/NormalLayout/largedata.ts

@@ -37,493 +37,7 @@ 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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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.' }
 
 ]

src/index.tsx

@@ -8,6 +8,7 @@ import { LayoutDemo } from './NormalLayout/index';
 // import { AddRemove } from "./AddRemove/index";
 // import { SortableList } from "./SortableList/index";
 import './index.css'
+import { Dragact } from "./lib/dragact";
 
 
 
@@ -52,9 +53,36 @@ 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(
-    <DemoDispatcher />,
+    <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>,
     document.getElementById('root')
 );

src/lib/dragact.tsx

@@ -83,6 +83,7 @@ export interface DragactProps {
     */
     className: number | string
 
+    /**是否有placeholder */
     placeholder?: Boolean
 
     style?: React.CSSProperties

src/lib/dragger/index.tsx

@@ -198,7 +198,6 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             if (event.target.id !== 'dragact-handle') return
         }
 
-
         /**
          * 把监听事件的回掉函数，绑定在document上
          * 当设置边界的时候，用户鼠标会离开元素的范围
@@ -388,7 +387,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
     }
 
     render() {
-        
+
         var { x, y, w, h } = this.state
         var { style, className, canResize } = this.props
         if (!this.props.isUserMove) {