tsc build 版本

dist/LayoutRestore/index.js

@@ -0,0 +1,85 @@
+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.', 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' }
+];
+var Card = function (props) {
+    var item = props.item;
+    return (React.createElement("div", { className: 'layout-Item' },
+        React.createElement("img", { src: item.img, style: { width: '100%', height: '60%' }, draggable: false, alt: 'card' }),
+        React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } }, item.content)));
+};
+var storeLayout = {};
+var LayoutRestore = /** @class */ (function (_super) {
+    __extends(LayoutRestore, _super);
+    function LayoutRestore() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.handleOnDragEnd = function () {
+            var maping = {};
+            _this.dragactNode.getLayout().forEach(function (item) {
+                if (item.key)
+                    maping[item.key] = item;
+            });
+            var parsedLayout = JSON.stringify(maping);
+            localStorage.setItem('layout', parsedLayout);
+        };
+        _this.renderDragact = function () {
+            var margin = [5, 5];
+            var dragactInit = {
+                width: 800,
+                col: 12,
+                rowHeight: 800 / 12,
+                margin: margin,
+                className: 'normal-layout'
+            };
+            return (React.createElement(Dragact, __assign({}, dragactInit, { ref: function (node) { return node ? _this.dragactNode = node : null; }, onDragEnd: _this.handleOnDragEnd }), Words.map(function (el, index) {
+                var dataSet = _this.getLayoutItemForKey(index + '');
+                if (dataSet)
+                    return React.createElement(Card, { item: el, key: index, "data-set": dataSet });
+                else
+                    return React.createElement(Card, { item: el, key: index, "data-set": { GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 } });
+            })));
+        };
+        return _this;
+    }
+    LayoutRestore.prototype.componentWillMount = function () {
+        var lastLayout = localStorage.getItem('layout');
+        if (lastLayout) {
+            storeLayout = JSON.parse(lastLayout);
+        }
+    };
+    LayoutRestore.prototype.getLayoutItemForKey = function (key) {
+        return storeLayout[key];
+    };
+    LayoutRestore.prototype.render = function () {
+        return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+            React.createElement("div", null,
+                React.createElement("h1", { style: { textAlign: 'center' } }, "Layout Restore Demo"),
+                this.renderDragact())));
+    };
+    return LayoutRestore;
+}(React.Component));
+export { LayoutRestore };

dist/NormalLayout/index.js

@@ -1,24 +1,68 @@
+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';
-const Words = [
+var 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) => {
-    const item = props.item;
+var Card = function (props) {
+    var item = props.item;
     return (React.createElement("div", { className: 'layout-Item' },
         React.createElement("img", { src: item.img, style: { width: '100%', height: '60%' }, draggable: false, alt: 'card' }),
         React.createElement("div", { style: { padding: 5, textAlign: 'center', color: '#595959' } }, item.content)));
 };
-export const LayoutDemo = () => {
-    return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
-        React.createElement("div", null,
-            React.createElement("h1", { style: { textAlign: 'center' } }, "Normal Layout Demo"),
-            React.createElement(Dragact, { width: 800, col: 12, rowHeight: 800 / 12, margin: [5, 5], className: 'normal-layout' }, Words.map((el, index) => {
-                return React.createElement(Card, { item: el, key: index, "data-set": { GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 } });
-            })))));
-};
+var LayoutDemo = /** @class */ (function (_super) {
+    __extends(LayoutDemo, _super);
+    function LayoutDemo() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            layout: []
+        };
+        return _this;
+    }
+    LayoutDemo.prototype.componentDidMount = function () {
+        this.setState({
+            layout: this.dragactNode.getLayout()
+        });
+    };
+    LayoutDemo.prototype.render = function () {
+        var _this = this;
+        var margin = [5, 5];
+        var dragactInit = {
+            width: 800,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            className: 'normal-layout'
+        };
+        return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+            React.createElement("div", null,
+                React.createElement("h1", { style: { textAlign: 'center' } }, "Normal Layout Demo"),
+                React.createElement(Dragact, __assign({}, dragactInit, { ref: function (node) { return node ? _this.dragactNode = node : null; } }), Words.map(function (el, index) {
+                    return React.createElement(Card, { item: el, key: index, "data-set": { GridX: (index * 3) % 12, GridY: index * 2, w: 3, h: 3 } });
+                })))));
+    };
+    return LayoutDemo;
+}(React.Component));
+export { LayoutDemo };

dist/SortedTable/index.js

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import { Dragact } from '../lib/dragact';
 import './index.css';
-const Words = [
+var 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) => {
-    const item = props.item;
+var Cell = function (props) {
+    var item = props.item;
     return (React.createElement("div", { className: 'layout-Cell' },
         React.createElement("img", { src: item.img, style: { width: 45, height: 45 }, draggable: false, alt: 'card' }),
         React.createElement("div", { style: { paddingLeft: 12, color: '#595959' } }, item.content)));
 };
-export const SortedTable = () => {
+export var SortedTable = function () {
     return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
         React.createElement("div", null,
             React.createElement("h1", { style: { textAlign: 'center' } }, "Sorted Table Demo"),
-            React.createElement(Dragact, { width: 800, col: 1, rowHeight: 60, margin: [2, 2], className: 'normal-layout' }, Words.map((el, index) => {
+            React.createElement(Dragact, { width: 800, col: 1, rowHeight: 60, margin: [2, 2], className: 'normal-layout' }, Words.map(function (el, index) {
                 return React.createElement(Cell, { item: el, key: index, "data-set": { GridX: 0, GridY: 0, w: 1, h: 1 } });
             })))));
 };

dist/StaticHeader/index.js

@@ -1,24 +1,24 @@
 import * as React from 'react';
 import { Dragact } from '../lib/dragact';
 import './index.css';
-const Words = [
+var 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: '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) => {
-    const { item } = props;
-    return (React.createElement("div", { className: `layout-Cell ${item.static ? "static" : ""}`, style: { background: item.static ? "#e8e8e8" : "" } },
+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("img", { src: item.img, style: { width: 45, height: 45 }, draggable: false, alt: 'card' }),
         React.createElement("div", { style: { paddingLeft: 12, color: '#595959' } }, item.content)));
 };
-export const SortedTableWithStatic = () => {
+export var SortedTableWithStatic = function () {
     return (React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
         React.createElement("div", null,
             React.createElement("h1", { style: { textAlign: 'center' } }, "Static Header Table Demo"),
-            React.createElement(Dragact, { width: 800, col: 1, rowHeight: 60, margin: [2, 2], className: 'normal-layout' }, Words.map((el, index) => {
+            React.createElement(Dragact, { width: 800, col: 1, rowHeight: 60, margin: [2, 2], className: 'normal-layout' }, Words.map(function (el, index) {
                 return React.createElement(Cell, { item: el, key: index, "data-set": { GridX: 0, GridY: index, w: 1, h: 1, static: el.static } });
             })))));
 };

dist/index.js

@@ -1,34 +1,51 @@
+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 __());
+    };
+})();
 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 './index.css';
-const DemoMap = {
+var DemoMap = {
     normalLayout: React.createElement(LayoutDemo, null),
     SortedTable: React.createElement(SortedTable, null),
-    StaticHeader: React.createElement(SortedTableWithStatic, null)
+    StaticHeader: React.createElement(SortedTableWithStatic, null),
+    LayoutRestore: React.createElement(LayoutRestore, null)
 };
-class DemoDispatcher extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
+var DemoDispatcher = /** @class */ (function (_super) {
+    __extends(DemoDispatcher, _super);
+    function DemoDispatcher() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
             demo: React.createElement(LayoutDemo, null)
         };
-        this.handleLayoutChange = (demoName) => {
-            this.setState({
+        _this.handleLayoutChange = function (demoName) {
+            _this.setState({
                 demo: DemoMap[demoName]
             });
         };
+        return _this;
     }
-    render() {
+    DemoDispatcher.prototype.render = function () {
+        var _this = this;
         return (React.createElement("div", null,
             React.createElement("div", { className: 'demo-button-layout' },
                 React.createElement("div", null, "Switch Demos"),
-                React.createElement("button", { onClick: () => this.handleLayoutChange('normalLayout') }, "normalLayout"),
-                React.createElement("button", { onClick: () => this.handleLayoutChange('SortedTable') }, "SortedTable"),
-                React.createElement("button", { onClick: () => this.handleLayoutChange('StaticHeader') }, "StaticHeader")),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('normalLayout'); } }, "normalLayout"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('SortedTable'); } }, "SortedTable"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('StaticHeader'); } }, "StaticHeader"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('LayoutRestore'); } }, "LayoutRestore")),
             this.state.demo));
-    }
-}
+    };
+    return DemoDispatcher;
+}(React.Component));
 ReactDOM.render(React.createElement(DemoDispatcher, null), document.getElementById('root'));

dist/lib/GridItem.js

@@ -1,94 +1,153 @@
+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 { Dragger } from './dragger/index';
 import { checkInContainer } from './util/correction';
-export default class GridItem extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onDrag = this.onDrag.bind(this);
-        this.onDragStart = this.onDragStart.bind(this);
-        this.onDragEnd = this.onDragEnd.bind(this);
-        this.calGridXY = this.calGridXY.bind(this);
-        this.calColWidth = this.calColWidth.bind(this);
+var checkWidthHeight = function (GridX, w, h, col) {
+    var newW = w;
+    var newH = h;
+    if (GridX + w > col - 1)
+        newW = col - GridX; //右边界
+    if (w < 1)
+        newW = 1;
+    if (h < 1)
+        newH = 1;
+    return {
+        w: newW, h: newH
+    };
+};
+var GridItem = /** @class */ (function (_super) {
+    __extends(GridItem, _super);
+    function GridItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onResizeStart = function (event, wPx, hPx) {
+            var _a = _this.props, GridX = _a.GridX, GridY = _a.GridY, UniqueKey = _a.UniqueKey, w = _a.w, h = _a.h;
+            _this.props.onResizeStart && _this.props.onResizeStart({ GridX: GridX, GridY: GridY, w: w, h: h, UniqueKey: UniqueKey + '', event: event });
+        };
+        _this.onResizing = function (event, wPx, hPx) {
+            var _a = _this.calPxToWH(wPx, hPx), w = _a.w, h = _a.h;
+            var _b = _this.props, GridX = _b.GridX, GridY = _b.GridY, UniqueKey = _b.UniqueKey;
+            _this.props.onResizing && _this.props.onResizing({ GridX: GridX, GridY: GridY, w: w, h: h, UniqueKey: UniqueKey + '', event: event });
+        };
+        _this.onResizeEnd = function (event, wPx, hPx) {
+            var _a = _this.calPxToWH(wPx, hPx), w = _a.w, h = _a.h;
+            var _b = _this.props, GridX = _b.GridX, GridY = _b.GridY, UniqueKey = _b.UniqueKey;
+            _this.props.onResizeEnd && _this.props.onResizeEnd({ GridX: GridX, GridY: GridY, w: w, h: h, UniqueKey: UniqueKey + '', event: event });
+        };
+        _this.onDrag = _this.onDrag.bind(_this);
+        _this.onDragStart = _this.onDragStart.bind(_this);
+        _this.onDragEnd = _this.onDragEnd.bind(_this);
+        _this.calGridXY = _this.calGridXY.bind(_this);
+        _this.calColWidth = _this.calColWidth.bind(_this);
+        return _this;
     }
     /** 计算容器的每一个格子多大 */
-    calColWidth() {
-        const { containerWidth, col, containerPadding, margin } = this.props;
+    GridItem.prototype.calColWidth = function () {
+        var _a = this.props, containerWidth = _a.containerWidth, col = _a.col, containerPadding = _a.containerPadding, margin = _a.margin;
         if (margin) {
             return (containerWidth - containerPadding[0] * 2 - margin[0] * (col + 1)) / col;
         }
         return (containerWidth - containerPadding[0] * 2 - 0 * (col + 1)) / col;
-    }
+    };
     /**转化，计算网格的GridX,GridY值 */
-    calGridXY(x, y) {
-        const { margin, containerWidth, col, w, rowHeight } = this.props;
+    GridItem.prototype.calGridXY = function (x, y) {
+        var _a = this.props, margin = _a.margin, containerWidth = _a.containerWidth, col = _a.col, w = _a.w, rowHeight = _a.rowHeight;
         /**坐标转换成格子的时候，无须计算margin */
-        let GridX = Math.round(x / containerWidth * col);
-        let GridY = Math.round(y / (rowHeight + (margin ? margin[1] : 0)));
+        var GridX = Math.round(x / containerWidth * col);
+        var GridY = Math.round(y / (rowHeight + (margin ? margin[1] : 0)));
         // /**防止元素出container */
         return checkInContainer(GridX, GridY, col, w);
-    }
+    };
     /**给予一个grid的位置，算出元素具体的在容器中位置在哪里，单位是px */
-    calGridItemPosition(GridX, GridY) {
-        var { margin, rowHeight } = this.props;
+    GridItem.prototype.calGridItemPosition = function (GridX, GridY) {
+        var _a = this.props, margin = _a.margin, rowHeight = _a.rowHeight;
         if (!margin)
             margin = [0, 0];
-        let x = Math.round(GridX * this.calColWidth() + (GridX + 1) * margin[0]);
-        let y = Math.round(GridY * rowHeight + margin[1] * (GridY + 1));
+        var x = Math.round(GridX * this.calColWidth() + (GridX + 1) * margin[0]);
+        var y = Math.round(GridY * rowHeight + margin[1] * (GridY + 1));
         return {
             x: x,
             y: y
         };
-    }
-    shouldComponentUpdate(props, state) {
+    };
+    GridItem.prototype.shouldComponentUpdate = function (props, state) {
         return this.props.GridX !== props.GridX ||
             this.props.GridY !== props.GridY ||
-            this.props.isUserMove !== props.isUserMove;
-    }
+            this.props.isUserMove !== props.isUserMove ||
+            this.props.w !== props.w ||
+            this.props.h !== props.h;
+    };
     /**宽和高计算成为px */
-    calWHtoPx(w, h) {
-        var { margin } = this.props;
+    GridItem.prototype.calWHtoPx = function (w, h) {
+        var margin = this.props.margin;
         if (!margin)
             margin = [0, 0];
-        const wPx = Math.round(w * this.calColWidth() + (w - 1) * margin[0]);
-        const hPx = Math.round(h * this.props.rowHeight + (h - 1) * margin[1]);
-        return { wPx, hPx };
-    }
-    onDragStart(x, y) {
-        const { w, h, UniqueKey } = this.props;
+        var wPx = Math.round(w * this.calColWidth() + (w - 1) * margin[0]);
+        var hPx = Math.round(h * this.props.rowHeight + (h - 1) * margin[1]);
+        return { wPx: wPx, hPx: hPx };
+    };
+    GridItem.prototype.calPxToWH = function (wPx, hPx) {
+        var calWidth = this.calColWidth();
+        var w = Math.round((wPx - calWidth * 0.5) / calWidth);
+        var h = Math.round((hPx - this.props.rowHeight * 0.8) / this.props.rowHeight);
+        return checkWidthHeight(this.props.GridX, w, h, this.props.col);
+    };
+    GridItem.prototype.onDragStart = function (x, y) {
+        var _a = this.props, w = _a.w, h = _a.h, UniqueKey = _a.UniqueKey;
         if (this.props.static)
             return;
-        const { GridX, GridY } = this.calGridXY(x, y);
+        var _b = this.calGridXY(x, y), GridX = _b.GridX, GridY = _b.GridY;
         this.props.onDragStart && this.props.onDragStart({
-            event, GridX, GridY, w, h, UniqueKey: UniqueKey + ''
+            event: event, GridX: GridX, GridY: GridY, w: w, h: h, UniqueKey: UniqueKey + ''
         });
-    }
-    onDrag(event, x, y) {
+    };
+    GridItem.prototype.onDrag = function (event, x, y) {
         if (this.props.static)
             return;
-        const { GridX, GridY } = this.calGridXY(x, y);
-        const { w, h, UniqueKey } = this.props;
-        this.props.onDrag && this.props.onDrag({ GridX, GridY, w, h, UniqueKey: UniqueKey + '', event });
-    }
-    onDragEnd() {
+        var _a = this.calGridXY(x, y), GridX = _a.GridX, GridY = _a.GridY;
+        var _b = this.props, w = _b.w, h = _b.h, UniqueKey = _b.UniqueKey;
+        this.props.onDrag && this.props.onDrag({ GridX: GridX, GridY: GridY, w: w, h: h, UniqueKey: UniqueKey + '', event: event });
+    };
+    GridItem.prototype.onDragEnd = function (event, x, y) {
         if (this.props.static)
             return;
+        var _a = this.calGridXY(x, y), GridX = _a.GridX, GridY = _a.GridY;
+        var _b = this.props, w = _b.w, h = _b.h, UniqueKey = _b.UniqueKey;
         if (this.props.onDragEnd)
-            this.props.onDragEnd(this.props.UniqueKey + '');
-    }
-    render() {
-        const { w, h, style, bounds, GridX, GridY } = this.props;
-        const { x, y } = this.calGridItemPosition(GridX, GridY);
-        const { wPx, hPx } = this.calWHtoPx(w, h);
-        return (React.createElement(Dragger, { style: Object.assign({}, style, { width: wPx, height: hPx, position: 'absolute', transition: this.props.isUserMove ? '' : 'all .2s' }), onDragStart: this.onDragStart, onMove: this.onDrag, onDragEnd: this.onDragEnd, x: x, y: y, isUserMove: this.props.isUserMove, bounds: bounds },
-            React.createElement("div", { style: { width: wPx, height: hPx } }, React.Children.map(this.props.children, (child) => child))));
-    }
-}
-GridItem.defaultProps = {
-    col: 12,
-    containerWidth: 500,
-    containerPadding: [0, 0],
-    margin: [10, 10],
-    rowHeight: 30,
-    w: 1,
-    h: 1
-};
+            this.props.onDragEnd({ GridX: GridX, GridY: GridY, w: w, h: h, UniqueKey: UniqueKey + '', event: event });
+    };
+    GridItem.prototype.render = function () {
+        var _a = this.props, w = _a.w, h = _a.h, style = _a.style, bounds = _a.bounds, GridX = _a.GridX, GridY = _a.GridY;
+        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', 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 },
+            React.createElement("div", { style: { height: '100%', width: "100%" } }, React.Children.map(this.props.children, function (child) { return child; }))));
+    };
+    GridItem.defaultProps = {
+        col: 12,
+        containerWidth: 500,
+        containerPadding: [0, 0],
+        margin: [10, 10],
+        rowHeight: 30,
+        w: 1,
+        h: 1
+    };
+    return GridItem;
+}(React.Component));
+export default GridItem;

dist/lib/dragact.js

@@ -1,3 +1,13 @@
+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 __());
+    };
+})();
 import * as React from "react";
 import GridItem from './GridItem';
 import { compactLayout } from './util/compact';
@@ -7,17 +17,64 @@ import { correctLayout } from './util/correction';
 import { getDataSet, stringJoin } from './utils';
 import { layoutItemForkey, syncLayout, MapLayoutTostate } from './util/initiate';
 import './style.css';
-export class Dragact extends React.Component {
-    constructor(props) {
-        super(props);
-        this.onDrag = this.onDrag.bind(this);
-        this.onDragStart = this.onDragStart.bind(this);
-        this.onDragEnd = this.onDragEnd.bind(this);
-        const layout = props.layout ?
+var Dragact = /** @class */ (function (_super) {
+    __extends(Dragact, _super);
+    function Dragact(props) {
+        var _this = _super.call(this, props) || this;
+        _this.onResizeStart = function (layoutItem) {
+            var GridX = layoutItem.GridX, GridY = layoutItem.GridY, w = layoutItem.w, h = layoutItem.h, UniqueKey = layoutItem.UniqueKey;
+            var sync = syncLayout(_this.state.layout, UniqueKey, GridX, GridY, true);
+            _this.setState({
+                GridXMoving: GridX,
+                GridYMoving: GridY,
+                wMoving: w,
+                hMoving: h,
+                placeholderShow: true,
+                placeholderMoving: true,
+                layout: sync,
+                dragType: 'resize'
+            });
+        };
+        _this.onResizing = function (layoutItem) {
+            var newLayout = layoutCheck(_this.state.layout, layoutItem, layoutItem.UniqueKey, layoutItem.UniqueKey, 0);
+            var compacted = compactLayout(newLayout);
+            for (var i = 0; i < compacted.length; i++) {
+                var compactedItem = compacted[i];
+                if (layoutItem.UniqueKey === compactedItem.key) {
+                    /**
+                     * 特殊点：当我们移动元素的时候，元素在layout中的位置不断改变
+                     * 但是当isUserMove=true的时候，鼠标拖拽的元素不会随着位图变化而变化
+                     * 但是实际layout中的位置还是会改变
+                     * (isUserMove=true用于解除placeholder和元素的绑定)
+                     */
+                    compactedItem.isUserMove = true;
+                    break;
+                }
+            }
+            _this.setState({
+                layout: compacted,
+                wMoving: layoutItem.w,
+                hMoving: layoutItem.h,
+                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1])
+            });
+        };
+        _this.onResizeEnd = function (layoutItem) {
+            var compactedLayout = compactLayout(_this.state.layout);
+            _this.setState({
+                placeholderShow: false,
+                layout: compactedLayout,
+                containerHeight: getMaxContainerHeight(compactedLayout, _this.props.rowHeight, _this.props.margin[1])
+            });
+            _this.props.onDragEnd && _this.props.onDragEnd(layoutItem);
+        };
+        _this.onDrag = _this.onDrag.bind(_this);
+        _this.onDragStart = _this.onDragStart.bind(_this);
+        _this.onDragEnd = _this.onDragEnd.bind(_this);
+        var layout = props.layout ?
             MapLayoutTostate(props.layout, props.children)
             :
                 getDataSet(props.children);
-        this.state = {
+        _this.state = {
             GridXMoving: 0,
             GridYMoving: 0,
             wMoving: 0,
@@ -25,12 +82,14 @@ export class Dragact extends React.Component {
             placeholderShow: false,
             placeholderMoving: false,
             layout: layout,
-            containerHeight: 500
+            containerHeight: 500,
+            dragType: 'drag'
         };
+        return _this;
     }
-    onDragStart(bundles) {
-        const { GridX, GridY, w, h, UniqueKey } = bundles;
-        const newlayout = syncLayout(this.state.layout, UniqueKey, GridX, GridY, true);
+    Dragact.prototype.onDragStart = function (bundles) {
+        var GridX = bundles.GridX, GridY = bundles.GridY, w = bundles.w, h = bundles.h, UniqueKey = bundles.UniqueKey;
+        var newlayout = syncLayout(this.state.layout, UniqueKey, GridX, GridY, true);
         this.setState({
             GridXMoving: GridX,
             GridYMoving: GridY,
@@ -39,16 +98,17 @@ export class Dragact extends React.Component {
             placeholderShow: true,
             placeholderMoving: true,
             layout: newlayout,
+            dragType: 'drag'
         });
         this.props.onDragStart && this.props.onDragStart(bundles);
-    }
-    onDrag(layoutItem) {
-        const { GridY, UniqueKey } = layoutItem;
-        const moving = GridY - this.state.GridYMoving;
-        const newLayout = layoutCheck(this.state.layout, layoutItem, UniqueKey, UniqueKey /*用户移动方块的key */, moving);
-        const compactedLayout = compactLayout(newLayout);
-        for (let i = 0; i < compactedLayout.length; i++) {
-            const compactedItem = compactedLayout[i];
+    };
+    Dragact.prototype.onDrag = function (layoutItem) {
+        var GridY = layoutItem.GridY, UniqueKey = layoutItem.UniqueKey;
+        var moving = GridY - this.state.GridYMoving;
+        var newLayout = layoutCheck(this.state.layout, layoutItem, UniqueKey, UniqueKey /*用户移动方块的key */, moving);
+        var compactedLayout = compactLayout(newLayout);
+        for (var i = 0; i < compactedLayout.length; i++) {
+            var compactedItem = compactedLayout[i];
             if (UniqueKey === compactedItem.key) {
                 /**
                  * 特殊点：当我们移动元素的时候，元素在layout中的位置不断改变
@@ -69,50 +129,58 @@ export class Dragact extends React.Component {
             containerHeight: getMaxContainerHeight(compactedLayout, this.props.rowHeight, this.props.margin[1])
         });
         this.props.onDrag && this.props.onDrag(layoutItem);
-    }
-    onDragEnd(key) {
-        const compactedLayout = compactLayout(this.state.layout);
+    };
+    Dragact.prototype.onDragEnd = function (layoutItem) {
+        var compactedLayout = compactLayout(this.state.layout);
         this.setState({
             placeholderShow: false,
             layout: compactedLayout,
             containerHeight: getMaxContainerHeight(compactedLayout, this.props.rowHeight, this.props.margin[1])
         });
-        this.props.onDragEnd && this.props.onDragEnd(key);
-    }
-    renderPlaceholder() {
+        this.props.onDragEnd && this.props.onDragEnd(layoutItem);
+    };
+    Dragact.prototype.renderPlaceholder = function () {
         if (!this.state.placeholderShow)
             return null;
-        var { col, width, padding, rowHeight, margin } = this.props;
-        const { GridXMoving, GridYMoving, wMoving, hMoving, placeholderMoving } = this.state;
+        var _a = this.props, col = _a.col, width = _a.width, padding = _a.padding, rowHeight = _a.rowHeight, margin = _a.margin;
+        var _b = this.state, GridXMoving = _b.GridXMoving, GridYMoving = _b.GridYMoving, wMoving = _b.wMoving, hMoving = _b.hMoving, placeholderMoving = _b.placeholderMoving, dragType = _b.dragType;
         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: '#d6e4ff', zIndex: 1, transition: ' all .15s' }, isUserMove: !placeholderMoving }));
-    }
-    componentDidMount() {
-        setTimeout(() => {
-            let layout = correctLayout(this.state.layout, this.props.col);
-            const compacted = compactLayout(layout);
-            this.setState({
+        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' }, isUserMove: !placeholderMoving, dragType: dragType }));
+    };
+    Dragact.prototype.componentDidMount = function () {
+        var _this = this;
+        setTimeout(function () {
+            var layout = correctLayout(_this.state.layout, _this.props.col);
+            var compacted = compactLayout(layout);
+            _this.setState({
                 layout: compacted,
-                containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
+                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1])
             });
         }, 1);
-    }
-    getGridItem(child, index) {
-        const { layout } = this.state;
-        var { col, width, padding, rowHeight, margin } = this.props;
-        const renderItem = layoutItemForkey(layout, child.key); //TODO:可以优化速度，这一步不是必须;
+    };
+    Dragact.prototype.getGridItem = function (child, index) {
+        var _a = this.state, layout = _a.layout, dragType = _a.dragType;
+        var _b = this.props, col = _b.col, width = _b.width, padding = _b.padding, rowHeight = _b.rowHeight, margin = _b.margin;
+        var renderItem = layoutItemForkey(layout, child.key); //TODO:可以优化速度，这一步不是必须;
         if (renderItem) {
             if (!padding)
                 padding = 0;
-            return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: renderItem.GridX, GridY: renderItem.GridY, w: renderItem.w, h: renderItem.h, onDrag: this.onDrag, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, isUserMove: renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false, UniqueKey: child.key, style: { zIndex: 2 }, static: renderItem.static }, child));
+            return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: renderItem.GridX, GridY: renderItem.GridY, w: renderItem.w, h: renderItem.h, onDrag: this.onDrag, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, isUserMove: renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false, UniqueKey: child.key, static: renderItem.static, onResizing: this.onResizing, onResizeStart: this.onResizeStart, onResizeEnd: this.onResizeEnd, dragType: dragType }, child));
         }
-    }
-    render() {
-        const { width, className } = this.props;
-        const { containerHeight } = this.state;
+    };
+    Dragact.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, width = _a.width, className = _a.className;
+        var containerHeight = this.state.containerHeight;
         return (React.createElement("div", { className: stringJoin('DraggerLayout', className + ''), style: { left: 100, width: width, height: containerHeight, zIndex: 1 } },
-            React.Children.map(this.props.children, (child, index) => this.getGridItem(child, index)),
+            React.Children.map(this.props.children, function (child, index) { return _this.getGridItem(child, index); }),
             this.renderPlaceholder()));
-    }
-}
+    };
+    //api
+    Dragact.prototype.getLayout = function () {
+        return this.state.layout;
+    };
+    return Dragact;
+}(React.Component));
+export { Dragact };

dist/lib/dragger/index.js

@@ -1,11 +1,29 @@
+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 { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds } from '../utils';
-/// <reference path="react.d.ts" />
-const doc = document;
-export class Dragger extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
+var doc = document;
+var Dragger = /** @class */ (function (_super) {
+    __extends(Dragger, _super);
+    function Dragger(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
             /** x轴位移，单位是px */
             x: 0,
             /** y轴位移，单位是px */
@@ -18,19 +36,68 @@ export class Dragger extends React.Component {
             lastX: 0,
             lastY: 0,
             /**堆叠的层级 */
-            zIndex: 1
+            zIndex: 1,
+            w: 0,
+            h: 0,
+            lastW: 0,
+            lastH: 0
         };
-        this.move = this.move.bind(this);
-        this.onDragEnd = this.onDragEnd.bind(this);
-        this.parent = null;
-        this.self = null;
+        _this.onResizeStart = function (event) {
+            /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
+            doc.body.style.userSelect = 'none';
+            doc.addEventListener('mouseup', _this.onResizeEnd);
+            doc.addEventListener('mousemove', _this.onResizing);
+            var originX, originY;
+            originX = event.clientX;
+            originY = event.clientY;
+            _this.props.onResizeStart && _this.props.onResizeStart(event, _this.state.w, _this.state.h);
+            _this.setState({
+                originX: originX,
+                originY: originY,
+                zIndex: 2,
+                lastW: _this.state.w,
+                lastH: _this.state.h
+            });
+            event.stopPropagation();
+        };
+        _this.onResizing = function (event) {
+            /*  event.client - this.state.origin 表示的是移动的距离,
+            *   elX表示的是原来已经有的位移
+            */
+            var deltaX, deltaY;
+            if (event.type.indexOf('mouse') >= 0) {
+                deltaX = event.clientX - _this.state.originX;
+                deltaY = event.clientY - _this.state.originY;
+            }
+            else {
+                deltaX = event.touches[0].clientX - _this.state.originX;
+                deltaY = event.touches[0].clientY - _this.state.originY;
+            }
+            /**移动时回调，用于外部控制 */
+            _this.props.onResizing && _this.props.onResizing(event, _this.state.w, _this.state.h);
+            _this.setState({
+                w: deltaX + _this.state.lastW,
+                h: deltaY + _this.state.lastH
+            });
+        };
+        _this.onResizeEnd = function (event) {
+            doc.body.style.userSelect = '';
+            doc.removeEventListener('mousemove', _this.onResizing);
+            doc.removeEventListener('mouseup', _this.onResizeEnd);
+            _this.props.onResizeEnd && _this.props.onResizeEnd(event, _this.state.w, _this.state.h);
+        };
+        _this.move = _this.move.bind(_this);
+        _this.onDragEnd = _this.onDragEnd.bind(_this);
+        _this.parent = null;
+        _this.self = null;
+        return _this;
     }
-    move(event) {
-        let { lastX, lastY } = this.state;
+    Dragger.prototype.move = function (event) {
+        var _a = this.state, lastX = _a.lastX, lastY = _a.lastY;
         /*  event.client - this.state.origin 表示的是移动的距离,
         *   elX表示的是原来已经有的位移
         */
-        let deltaX, deltaY;
+        var deltaX, deltaY;
         if (event.type.indexOf('mouse') >= 0) {
             deltaX = event.clientX - this.state.originX + lastX;
             deltaY = event.clientY - this.state.originY + lastY;
@@ -39,17 +106,17 @@ export class Dragger extends React.Component {
             deltaX = event.touches[0].clientX - this.state.originX + lastX;
             deltaY = event.touches[0].clientY - this.state.originY + lastY;
         }
-        const { bounds } = this.props;
+        var bounds = this.props.bounds;
         if (bounds) {
             /**
             * 如果用户指定一个边界，那么在这里处理
             */
-            let NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
+            var NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
             /**
              * 网格式移动范围设定，永远移动 n 的倍数
              * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
              */
-            const { grid } = this.props;
+            var grid = this.props.grid;
             if (Array.isArray(grid) && grid.length === 2) {
                 deltaX = Math.round(deltaX / grid[0]) * grid[0];
                 deltaY = Math.round(deltaY / grid[1]) * grid[1];
@@ -91,8 +158,8 @@ export class Dragger extends React.Component {
             x: deltaX,
             y: deltaY
         });
-    }
-    onDragStart(event) {
+    };
+    Dragger.prototype.onDragStart = function (event) {
         /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
         doc.body.style.userSelect = 'none';
         // if (this.props.hasDraggerHandle) {
@@ -128,7 +195,7 @@ export class Dragger extends React.Component {
             this.self = event.currentTarget;
         }
         this.props.onDragStart && this.props.onDragStart(this.state.x, this.state.y);
-        let originX, originY;
+        var originX, originY;
         if (event.type.indexOf('mouse') >= 0) {
             originX = event.clientX;
             originY = event.clientY;
@@ -144,8 +211,8 @@ export class Dragger extends React.Component {
             lastY: this.state.y,
             zIndex: 10
         });
-    }
-    onDragEnd(event) {
+    };
+    Dragger.prototype.onDragEnd = function (event) {
         /** 取消用户选择限制，用户可以重新选择 */
         doc.body.style.userSelect = '';
         this.parent = null;
@@ -161,9 +228,9 @@ export class Dragger extends React.Component {
         this.setState({
             zIndex: 1
         });
-        this.props.onDragEnd && this.props.onDragEnd(event);
-    }
-    componentDidMount() {
+        this.props.onDragEnd && this.props.onDragEnd(event, this.state.x, this.state.y);
+    };
+    Dragger.prototype.componentDidMount = function () {
         /**
          * 这个函数只会调用一次
          * 这个只是一个临时的解决方案，因为这样会使得元素进行两次刷新
@@ -175,14 +242,14 @@ export class Dragger extends React.Component {
                 y: this.props.y
             });
         }
-    }
-    componentWillReceiveProps(nextProps) {
+    };
+    Dragger.prototype.componentWillReceiveProps = function (nextProps) {
         /**
          * 外部props 改变的时候更新元素的内部位置
          * 这个api设计其实很不好
          * 以后可能会修改掉
          */
-        const { isUserMove } = nextProps;
+        var isUserMove = nextProps.isUserMove;
         if (!isUserMove) {
             if (typeof nextProps.x === 'number' &&
                 typeof nextProps.y === 'number') {
@@ -190,29 +257,52 @@ export class Dragger extends React.Component {
                     x: nextProps.x,
                     y: nextProps.y,
                     lastX: nextProps.x,
-                    lastY: nextProps.y
+                    lastY: nextProps.y,
+                    w: nextProps.w,
+                    h: nextProps.h
                 });
             }
         }
-    }
-    render() {
-        let { x, y, zIndex } = this.state;
-        const { style, className } = this.props;
+    };
+    Dragger.prototype.render = function () {
+        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;
         if (!this.props.isUserMove) {
             /**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
             x = this.props.x ? this.props.x : 0;
             y = this.props.y ? this.props.y : 0;
+            if (style) {
+                w = style.width ? style.width : w;
+                h = style.height ? style.height : h;
+                console.log(style);
+            }
+        }
+        if (style) {
+            w = w === 0 ? style.width : w;
+            h = h === 0 ? style.height : h;
         }
         /**主要是为了让用户定义自己的className去修改css */
-        const fixedClassName = typeof className === 'undefined' ? '' : className + ' ';
-        return (React.createElement("div", { className: `${fixedClassName}WrapDragger`, style: Object.assign({}, style, { zIndex: zIndex, touchAction: 'none!important', transform: `translate(${x}px,${y}px)` }), onMouseDown: this.onDragStart.bind(this), onTouchStart: this.onDragStart.bind(this), onTouchEnd: this.onDragEnd.bind(this), onMouseUp: this.onDragEnd.bind(this) }, React.Children.only(this.props.children)));
-    }
-}
-/**
- * 初始变量设置
- */
-Dragger.defaultProps = {
-    allowX: true,
-    allowY: true,
-    isUserMove: true
-};
+        var fixedClassName = typeof className === 'undefined' ? '' : className + ' ';
+        return (React.createElement("div", { className: fixedClassName + "WrapDragger", style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }), onMouseDown: this.onDragStart.bind(this), onTouchStart: this.onDragStart.bind(this), onTouchEnd: this.onDragEnd.bind(this), onMouseUp: this.onDragEnd.bind(this) },
+            React.Children.only(this.props.children),
+            React.createElement("span", { onMouseDown: this.onResizeStart, 
+                // onTouchStart={this.onDragStart.bind(this)}
+                // onTouchEnd={this.onDragEnd.bind(this)}
+                onMouseUp: this.onResizeEnd, 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)'
+                } })));
+    };
+    /**
+     * 初始变量设置
+     */
+    Dragger.defaultProps = {
+        allowX: true,
+        allowY: true,
+        isUserMove: true
+    };
+    return Dragger;
+}(React.Component));
+export { Dragger };

dist/lib/util/collison.js

@@ -1,4 +1,12 @@
-export const collision = (a, b) => {
+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;
+};
+export var collision = function (a, b) {
     if (a.GridX === b.GridX && a.GridY === b.GridY &&
         a.w === b.w && a.h === b.h) {
         return true;
@@ -14,17 +22,17 @@ export const collision = (a, b) => {
     return true;
 };
 /**获取layout中，item第一个碰撞到的物体 */
-export const getFirstCollison = (layout, item) => {
-    for (let i = 0, length = layout.length; i < length; i++) {
+export var getFirstCollison = function (layout, item) {
+    for (var i = 0, length_1 = layout.length; i < length_1; i++) {
         if (collision(layout[i], item)) {
             return layout[i];
         }
     }
     return null;
 };
-export const layoutCheck = (layout, layoutItem, key, fristItemkey, moving) => {
-    let i = [], movedItem = []; /**收集所有移动过的物体 */
-    let newlayout = layout.map((item, idx) => {
+export var layoutCheck = function (layout, layoutItem, key, fristItemkey, moving) {
+    var i = [], movedItem = []; /**收集所有移动过的物体 */
+    var newlayout = layout.map(function (item, idx) {
         if (item.key !== key) {
             if (item.static) {
                 return item;
@@ -35,7 +43,7 @@ export const layoutCheck = (layout, layoutItem, key, fristItemkey, moving) => {
                  * 这里就是奇迹发生的地方，如果向上移动，那么必须注意的是
                  * 一格一格的移动，而不是一次性移动
                  */
-                let offsetY = item.GridY + 1;
+                var offsetY = item.GridY + 1;
                 /**这一行也非常关键，当向上移动的时候，碰撞的元素必须固定 */
                 // if (moving < 0 && layoutItem.GridY > 0) offsetY = item.GridY
                 if (layoutItem.GridY > item.GridY && layoutItem.GridY < item.GridY + item.h) {
@@ -50,42 +58,42 @@ export const layoutCheck = (layout, layoutItem, key, fristItemkey, moving) => {
                  */
                 if (moving > 0) {
                     if (layoutItem.GridY + layoutItem.h < item.GridY) {
-                        let collision;
-                        let copy = Object.assign({}, item);
+                        var collision_1;
+                        var copy_1 = __assign({}, item);
                         while (true) {
-                            let newLayout = layout.filter((item) => {
-                                if (item.key !== key && (item.key !== copy.key)) {
+                            var newLayout = layout.filter(function (item) {
+                                if (item.key !== key && (item.key !== copy_1.key)) {
                                     return item;
                                 }
                             });
-                            collision = getFirstCollison(newLayout, copy);
-                            if (collision) {
-                                offsetY = collision.GridY + collision.h;
+                            collision_1 = getFirstCollison(newLayout, copy_1);
+                            if (collision_1) {
+                                offsetY = collision_1.GridY + collision_1.h;
                                 break;
                             }
                             else {
-                                copy.GridY--;
+                                copy_1.GridY--;
                             }
-                            if (copy.GridY < 0) {
+                            if (copy_1.GridY < 0) {
                                 offsetY = 0;
                                 break;
                             }
                         }
                     }
                 }
-                movedItem.push(Object.assign({}, item, { GridY: offsetY, isUserMove: false }));
-                return Object.assign({}, item, { GridY: offsetY, isUserMove: false });
+                movedItem.push(__assign({}, item, { GridY: offsetY, isUserMove: false }));
+                return __assign({}, item, { GridY: offsetY, isUserMove: false });
             }
         }
         else if (fristItemkey === key) {
             /**永远保持用户移动的块是 isUserMove === true */
-            return Object.assign({}, item, { GridX: layoutItem.GridX, GridY: layoutItem.GridY, isUserMove: true });
+            return __assign({}, item, { GridX: layoutItem.GridX, GridY: layoutItem.GridY, isUserMove: true, w: layoutItem.w, h: layoutItem.h });
         }
         return item;
     });
     /** 递归调用,将layout中的所有重叠元素全部移动 */
-    const length = movedItem.length;
-    for (let c = 0; c < length; c++) {
+    var length = movedItem.length;
+    for (var c = 0; c < length; c++) {
         newlayout = layoutCheck(newlayout, movedItem[c], i[c], fristItemkey, 0);
     }
     return newlayout;

dist/lib/util/compact.js

@@ -1,3 +1,11 @@
+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 { sortLayout } from "./sort";
 import { getFirstCollison } from "./collison";
 /**
@@ -5,18 +13,18 @@ import { getFirstCollison } from "./collison";
  * @param {*} finishedLayout 压缩完的元素会放进这里来，用来对比之后的每一个元素是否需要压缩
  * @param {*} item
  */
-export const compactItem = (finishedLayout, item) => {
+export var compactItem = function (finishedLayout, item) {
     if (item.static)
         return item;
-    const newItem = Object.assign({}, item);
+    var newItem = __assign({}, item);
     if (finishedLayout.length === 0) {
-        return Object.assign({}, newItem, { GridY: 0 });
+        return __assign({}, newItem, { GridY: 0 });
     }
     /**
      * 类似一个递归调用
      */
     while (true) {
-        let FirstCollison = getFirstCollison(finishedLayout, newItem);
+        var FirstCollison = getFirstCollison(finishedLayout, newItem);
         if (FirstCollison) {
             /**第一次发生碰撞时，就可以返回了 */
             newItem.GridY = FirstCollison.GridY + FirstCollison.h;
@@ -24,19 +32,19 @@ export const compactItem = (finishedLayout, item) => {
         }
         newItem.GridY--;
         if (newItem.GridY < 0)
-            return Object.assign({}, newItem, { GridY: 0 }); /**碰到边界的时候，返回 */
+            return __assign({}, newItem, { GridY: 0 }); /**碰到边界的时候，返回 */
     }
 };
 /**
  * 压缩layout，使得每一个元素都会紧挨着边界或者相邻的元素
  * @param {*} layout
  */
-export const compactLayout = (layout) => {
-    let sorted = sortLayout(layout);
-    const needCompact = Array(layout.length);
-    const compareList = [];
-    for (let i = 0, length = sorted.length; i < length; i++) {
-        let finished = compactItem(compareList, sorted[i]);
+export var compactLayout = function (layout) {
+    var sorted = sortLayout(layout);
+    var needCompact = Array(layout.length);
+    var compareList = [];
+    for (var i = 0, length_1 = sorted.length; i < length_1; i++) {
+        var finished = compactItem(compareList, sorted[i]);
         finished.isUserMove = false;
         compareList.push(finished);
         needCompact[i] = finished;

dist/lib/util/correction.js

@@ -1,5 +1,5 @@
 import { collision, layoutCheck } from "./collison";
-export const checkInContainer = (GridX, GridY, col, w) => {
+export var checkInContainer = function (GridX, GridY, col, w) {
     /**防止元素出container */
     if (GridX + w > col - 1)
         GridX = col - w; //右边界
@@ -7,20 +7,20 @@ export const checkInContainer = (GridX, GridY, col, w) => {
         GridX = 0; //左边界
     if (GridY < 0)
         GridY = 0; //上边界
-    return { GridX, GridY };
+    return { GridX: GridX, GridY: GridY };
 };
 /**
  * 这个函数会有副作用，不是纯函数，会改变item的Gridx和GridY
  * @param {*} item
  */
-export const correctItem = (item, col) => {
-    const { GridX, GridY } = checkInContainer(item.GridX, item.GridY, col, item.w);
+export var correctItem = function (item, col) {
+    var _a = checkInContainer(item.GridX, item.GridY, col, item.w), GridX = _a.GridX, GridY = _a.GridY;
     item.GridX = GridX;
     item.GridY = GridY;
 };
-export const correctLayout = (layout, col) => {
-    var copy = [...layout];
-    for (let i = 0; i < layout.length - 1; i++) {
+export var correctLayout = function (layout, col) {
+    var copy = layout.slice();
+    for (var i = 0; i < layout.length - 1; i++) {
         correctItem(copy[i], col);
         correctItem(copy[i + 1], col);
         if (collision(copy[i], copy[i + 1])) {

dist/lib/util/initiate.js

@@ -1,3 +1,11 @@
+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;
+};
 /**
  * 把用户移动的块，标记为true
  * @param {*} layout
@@ -6,8 +14,8 @@
  * @param {*} GridY
  * @param {*} isUserMove
  */
-export const syncLayout = (layout, key, GridX, GridY, isUserMove) => {
-    const newlayout = layout.map((item) => {
+export var syncLayout = function (layout, key, GridX, GridY, isUserMove) {
+    var newlayout = layout.map(function (item) {
         if (item.key === key) {
             item.GridX = GridX;
             item.GridY = GridY;
@@ -25,9 +33,9 @@ export const syncLayout = (layout, key, GridX, GridY, isUserMove) => {
  * @param {*} layout
  * @param {*} children
  */
-export const MapLayoutTostate = (layout, children) => {
-    return layout.map((child, index) => {
-        let newChild = Object.assign({}, child, { isUserMove: true, key: children[index].key, static: children[index].static });
+export var MapLayoutTostate = function (layout, children) {
+    return layout.map(function (child, index) {
+        var newChild = __assign({}, child, { isUserMove: true, key: children[index].key, static: children[index].static });
         return newChild;
     });
 };
@@ -36,8 +44,8 @@ export const MapLayoutTostate = (layout, children) => {
  * @param {*} layout 输入进来的布局
  * @param {*} key
  */
-export const layoutItemForkey = (layout, key) => {
-    for (let i = 0, length = layout.length; i < length; i++) {
+export var layoutItemForkey = function (layout, key) {
+    for (var i = 0, length_1 = layout.length; i < length_1; i++) {
         if (key === layout[i].key) {
             return layout[i];
         }

dist/lib/util/sort.js

@@ -1,8 +1,8 @@
 export function quickSort(a) {
-    return a.length <= 1 ? a : quickSort(a.slice(1).filter(item => item <= a[0])).concat(a[0], quickSort(a.slice(1).filter(item => item > a[0])));
+    return a.length <= 1 ? a : quickSort(a.slice(1).filter(function (item) { return item <= a[0]; })).concat(a[0], quickSort(a.slice(1).filter(function (item) { return item > a[0]; })));
 }
-export const sortLayout = (layout) => {
-    return [].concat(layout).sort((a, b) => {
+export var sortLayout = function (layout) {
+    return [].concat(layout).sort(function (a, b) {
         if (a.GridY > b.GridY || (a.GridY === b.GridY && a.GridX > b.GridX)) {
             if (a.static)
                 return 0; //为了静态，排序的时候尽量把静态的放在前面
@@ -14,11 +14,13 @@ export const sortLayout = (layout) => {
         return -1;
     });
 };
-export const getMaxContainerHeight = (layout, elementHeight = 30, elementMarginBottom = 10) => {
-    const ar = layout.map((item) => {
+export var getMaxContainerHeight = function (layout, elementHeight, elementMarginBottom) {
+    if (elementHeight === void 0) { elementHeight = 30; }
+    if (elementMarginBottom === void 0) { elementMarginBottom = 10; }
+    var ar = layout.map(function (item) {
         return item.GridY + item.h;
     });
-    const h = quickSort(ar)[ar.length - 1];
-    const height = h * (elementHeight + elementMarginBottom) + elementMarginBottom;
+    var h = quickSort(ar)[ar.length - 1];
+    var height = h * (elementHeight + elementMarginBottom) + elementMarginBottom;
     return height;
 };

dist/lib/utils.js

@@ -1,38 +1,46 @@
-export const int = (number) => {
+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;
+};
+export var int = function (number) {
     if (number === '' || number === null) {
         return 0;
     }
     return parseInt(number, 10);
 };
-export const innerWidth = (node) => {
-    let width = node.clientWidth;
-    const computedStyle = node.style;
+export var innerWidth = function (node) {
+    var width = node.clientWidth;
+    var computedStyle = node.style;
     width -= int(computedStyle.paddingLeft);
     width -= int(computedStyle.paddingRight);
     return width;
 };
-export const outerWidth = (node) => {
-    let width = node.clientWidth;
-    const computedStyle = node.style;
+export var outerWidth = function (node) {
+    var width = node.clientWidth;
+    var computedStyle = node.style;
     width += int(computedStyle.borderLeftWidth);
     width += int(computedStyle.borderRightWidth);
     return width;
 };
-export const innerHeight = (node) => {
-    let height = node.clientHeight;
-    const computedStyle = node.style;
+export var innerHeight = function (node) {
+    var height = node.clientHeight;
+    var computedStyle = node.style;
     height -= int(computedStyle.paddingTop);
     height -= int(computedStyle.paddingBottom);
     return height;
 };
-export const outerHeight = (node) => {
-    let height = node.clientHeight;
-    const computedStyle = node.style;
+export var outerHeight = function (node) {
+    var height = node.clientHeight;
+    var computedStyle = node.style;
     height += int(computedStyle.borderTopWidth);
     height += int(computedStyle.borderBottomWidth);
     return height;
 };
-export const parseBounds = (bounds) => {
+export var parseBounds = function (bounds) {
     return {
         left: bounds.left,
         top: bounds.top,
@@ -40,14 +48,14 @@ export const parseBounds = (bounds) => {
         bottom: bounds.bottom
     };
 };
-export const isNumber = (things) => {
+export var isNumber = function (things) {
     return typeof things === 'number' ? true : false;
 };
-export const getDataSet = (children) => {
-    return children.map((child) => {
-        return Object.assign({}, child.props['data-set'], { isUserMove: true, key: child.key });
+export var getDataSet = function (children) {
+    return children.map(function (child) {
+        return __assign({}, child.props['data-set'], { isUserMove: true, key: child.key });
     });
 };
-export const stringJoin = (source, join) => {
-    return source + (join ? ` ${join}` : '');
+export var stringJoin = function (source, join) {
+    return source + (join ? " " + join : '');
 };

package.json

@@ -62,4 +62,4 @@
     "react-dom": "^16.3.0-alpha.1",
     "typescript-babel-jest": "^1.0.5"
   }
-}
+}