更新了一大波信息

dist/AddRemove/index.js

@@ -0,0 +1,83 @@
+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';
+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;
+    var dataSet = props['data-set'];
+    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' } }, dataSet.handle ? React.createElement("div", { className: 'card-handle', id: "dragact-handle" }, "\u70B9\u6211\u62D6\u52A8") : item.content)));
+};
+var AddRemove = /** @class */ (function (_super) {
+    __extends(AddRemove, _super);
+    function AddRemove() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            layout: [1]
+        };
+        _this.handleClick = function () {
+            _this.setState({
+                layout: _this.state.layout.concat([1])
+            });
+            console.log(_this.state.layout);
+        };
+        _this.handleDeleteClick = function () {
+            _this.state.layout.shift();
+            _this.setState({
+                layout: _this.state.layout.slice()
+            });
+        };
+        return _this;
+    }
+    AddRemove.prototype.componentDidMount = function () {
+        this.setState({
+            layout: this.dragactNode.getLayout()
+        });
+    };
+    AddRemove.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", null,
+            React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+                React.createElement("div", null,
+                    React.createElement("h1", { style: { textAlign: 'center' } }, "AddRemove Demo"),
+                    React.createElement(Dragact, __assign({}, dragactInit, { ref: function (node) { return node ? _this.dragactNode = node : null; } }), this.state.layout.map(function (el, i) {
+                        return (React.createElement(Card, { item: Words[0], key: i, "data-set": { GridX: i * 3, GridY: 0, w: 3, h: 3 } }));
+                    })),
+                    React.createElement("button", { onClick: this.handleClick }, "\u65B0\u589E"),
+                    React.createElement("button", { onClick: this.handleDeleteClick }, "\u5220\u9664")))));
+    };
+    return AddRemove;
+}(React.Component));
+export { AddRemove };

dist/HandleLayout/index.js

@@ -38,7 +38,19 @@ var HandleLayout = /** @class */ (function (_super) {
     function HandleLayout() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
-            layout: []
+            layout: [1]
+        };
+        _this.handleClick = function () {
+            _this.setState({
+                layout: _this.state.layout.concat([1])
+            });
+            console.log(_this.state.layout);
+        };
+        _this.handleDeleteClick = function () {
+            _this.state.layout.shift();
+            _this.setState({
+                layout: _this.state.layout.slice()
+            });
         };
         return _this;
     }
@@ -62,10 +74,10 @@ var HandleLayout = /** @class */ (function (_super) {
                 React.createElement("div", null,
                     React.createElement("h1", { style: { textAlign: 'center' } }, "Handle Layout Demo"),
                     React.createElement(Dragact, __assign({}, dragactInit, { ref: function (node) { return node ? _this.dragactNode = node : null; } }),
-                        React.createElement(Card, { item: Words[0], key: 0, "data-set": { GridX: 0, GridY: 0, w: 3, h: 3 } }),
-                        React.createElement(Card, { item: Words[1], key: 1, "data-set": { GridX: 3, GridY: 0, w: 3, h: 3 } }),
-                        React.createElement(Card, { item: Words[2], key: 2, "data-set": { GridX: 6, GridY: 0, w: 3, h: 3 } }),
-                        React.createElement(Card, { item: Words[3], key: 3, "data-set": { GridX: 9, GridY: 0, w: 3, h: 3, handle: true } }))))));
+                        React.createElement(Card, { item: Words[0], key: 0, "data-set": { GridX: 0 * 3, GridY: 0, w: 3, h: 3 } }),
+                        React.createElement(Card, { item: Words[1], key: 1, "data-set": { GridX: 1 * 3, GridY: 0, w: 3, h: 3 } }),
+                        React.createElement(Card, { item: Words[2], key: 2, "data-set": { GridX: 2 * 3, GridY: 0, w: 3, h: 3, handle: true } }),
+                        React.createElement(Card, { item: Words[3], key: 3, "data-set": { GridX: 3 * 3, GridY: 0, w: 3, h: 3 } }))))));
     };
     return HandleLayout;
 }(React.Component));

dist/StaticHeader/index.js

@@ -5,7 +5,7 @@ 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: 'Sorry I just can not move in any circumstances,too', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738', static: true },
     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
 ];
 var Cell = function (props) {

dist/index.js

@@ -15,20 +15,22 @@ import { SortedTable } from "./SortedTable/index";
 import { SortedTableWithStatic } from "./StaticHeader/index";
 import { LayoutRestore } from "./LayoutRestore/index";
 import { HandleLayout } from "./HandleLayout/index";
+import { AddRemove } from "./AddRemove/index";
 import './index.css';
 var DemoMap = {
     normalLayout: React.createElement(LayoutDemo, null),
     SortedTable: React.createElement(SortedTable, null),
     StaticHeader: React.createElement(SortedTableWithStatic, null),
     LayoutRestore: React.createElement(LayoutRestore, null),
-    HandleLayout: React.createElement(HandleLayout, null)
+    HandleLayout: React.createElement(HandleLayout, null),
+    AddRemove: React.createElement(AddRemove, null)
 };
 var DemoDispatcher = /** @class */ (function (_super) {
     __extends(DemoDispatcher, _super);
     function DemoDispatcher() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
-            demo: React.createElement(SortedTable, null)
+            demo: React.createElement(LayoutDemo, null)
         };
         _this.handleLayoutChange = function (demoName) {
             _this.setState({
@@ -46,7 +48,8 @@ var DemoDispatcher = /** @class */ (function (_super) {
                 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"),
-                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('HandleLayout'); } }, "HandleLayout")),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('HandleLayout'); } }, "HandleLayout"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('AddRemove'); } }, "AddRemove")),
             this.state.demo));
     };
     return DemoDispatcher;

dist/lib/dragact.js

@@ -8,6 +8,14 @@ var __extends = (this && this.__extends) || (function () {
         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 GridItem from './GridItem';
 import { compactLayout } from './util/compact';
@@ -22,8 +30,8 @@ var Dragact = /** @class */ (function (_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);
+            var GridX = layoutItem.GridX, GridY = layoutItem.GridY, w = layoutItem.w, h = layoutItem.h;
+            var sync = syncLayout(_this.state.layout, layoutItem);
             _this.setState({
                 GridXMoving: GridX,
                 GridYMoving: GridY,
@@ -37,33 +45,22 @@ var Dragact = /** @class */ (function (_super) {
         };
         _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;
-                }
-            }
+            var _a = compactLayout(newLayout, layoutItem), compacted = _a.compacted, mapLayout = _a.mapLayout;
             _this.setState({
                 layout: compacted,
                 wMoving: layoutItem.w,
                 hMoving: layoutItem.h,
+                mapLayout: mapLayout,
                 containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1])
             });
         };
         _this.onResizeEnd = function (layoutItem) {
-            var compactedLayout = compactLayout(_this.state.layout);
+            var _a = compactLayout(_this.state.layout, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
             _this.setState({
                 placeholderShow: false,
-                layout: compactedLayout,
-                containerHeight: getMaxContainerHeight(compactedLayout, _this.props.rowHeight, _this.props.margin[1])
+                layout: compacted,
+                mapLayout: mapLayout,
+                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1])
             });
             _this.props.onDragEnd && _this.props.onDragEnd(layoutItem);
         };
@@ -83,13 +80,14 @@ var Dragact = /** @class */ (function (_super) {
             placeholderMoving: false,
             layout: layout,
             containerHeight: 500,
-            dragType: 'drag'
+            dragType: 'drag',
+            mapLayout: undefined
         };
         return _this;
     }
     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);
+        var GridX = bundles.GridX, GridY = bundles.GridY, w = bundles.w, h = bundles.h;
+        var newlayout = syncLayout(this.state.layout, bundles);
         this.setState({
             GridXMoving: GridX,
             GridYMoving: GridY,
@@ -106,36 +104,23 @@ var Dragact = /** @class */ (function (_super) {
         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中的位置不断改变
-                 * 但是当isUserMove=true的时候，鼠标拖拽的元素不会随着位图变化而变化
-                 * 但是实际layout中的位置还是会改变
-                 * (isUserMove=true用于解除placeholder和元素的绑定)
-                 */
-                compactedItem.isUserMove = true;
-                layoutItem.GridX = compactedItem.GridX;
-                layoutItem.GridY = compactedItem.GridY;
-                break;
-            }
-        }
+        var _a = compactLayout(newLayout, layoutItem), compacted = _a.compacted, mapLayout = _a.mapLayout;
         this.setState({
             GridXMoving: layoutItem.GridX,
             GridYMoving: layoutItem.GridY,
-            layout: compactedLayout,
-            containerHeight: getMaxContainerHeight(compactedLayout, this.props.rowHeight, this.props.margin[1])
+            layout: compacted,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
         });
         this.props.onDrag && this.props.onDrag(layoutItem);
     };
     Dragact.prototype.onDragEnd = function (layoutItem) {
-        var compactedLayout = compactLayout(this.state.layout);
+        var _a = compactLayout(this.state.layout, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
         this.setState({
             placeholderShow: false,
-            layout: compactedLayout,
-            containerHeight: getMaxContainerHeight(compactedLayout, this.props.rowHeight, this.props.margin[1])
+            layout: compacted,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
         });
         this.props.onDragEnd && this.props.onDragEnd(layoutItem);
     };
@@ -148,22 +133,71 @@ var Dragact = /** @class */ (function (_super) {
             padding = 0;
         return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: GridXMoving, GridY: GridYMoving, w: wMoving, h: hMoving, style: { background: 'rgba(15,15,15,0.3)', zIndex: dragType === 'drag' ? 1 : 10, transition: ' all .15s' }, isUserMove: !placeholderMoving, dragType: dragType, canDrag: false, canResize: false }));
     };
+    Dragact.prototype.componentWillReceiveProps = function (nextProps) {
+        if (this.props.children.length > nextProps.children.length) {
+            var mapLayoutCopy_1 = __assign({}, this.state.mapLayout);
+            nextProps.children.forEach(function (child) {
+                if (mapLayoutCopy_1[child.key] !== void 666)
+                    delete mapLayoutCopy_1[child.key];
+            });
+            var _loop_1 = function (key) {
+                var newLayout_1 = this_1.state.layout.filter(function (child) {
+                    if (child.key !== key)
+                        return child;
+                });
+                var _a = compactLayout(newLayout_1, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
+                this_1.setState({
+                    containerHeight: getMaxContainerHeight(compacted, this_1.props.rowHeight, this_1.props.margin[1]),
+                    layout: compacted,
+                    mapLayout: mapLayout
+                });
+            };
+            var this_1 = this;
+            for (var key in mapLayoutCopy_1) {
+                _loop_1(key);
+            }
+        }
+        if (this.props.children.length < nextProps.children.length) {
+            var item;
+            for (var idx in nextProps.children) {
+                var i = nextProps.children[idx];
+                if (this.state.mapLayout && !this.state.mapLayout[i.key]) {
+                    item = i;
+                    break;
+                }
+            }
+            if (item !== void 666) {
+                var dataSet = __assign({}, item.props['data-set'], { isUserMove: false, key: item.key });
+                var newLayout = this.state.layout.concat([dataSet]);
+                newLayout = correctLayout(newLayout, this.props.col);
+                var _a = compactLayout(newLayout, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
+                console.log(mapLayout);
+                // console.log(layout)
+                this.setState({
+                    containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
+                    layout: compacted,
+                    mapLayout: mapLayout
+                });
+            }
+        }
+    };
     Dragact.prototype.componentDidMount = function () {
         var _this = this;
         setTimeout(function () {
             var layout = correctLayout(_this.state.layout, _this.props.col);
-            var compacted = compactLayout(layout);
+            var _a = compactLayout(layout, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
             _this.setState({
                 layout: compacted,
+                mapLayout: mapLayout,
                 containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1])
             });
         }, 1);
     };
     Dragact.prototype.getGridItem = function (child, index) {
-        var _a = this.state, layout = _a.layout, dragType = _a.dragType;
+        var _a = this.state, dragType = _a.dragType, mapLayout = _a.mapLayout;
         var _b = this.props, col = _b.col, width = _b.width, padding = _b.padding, rowHeight = _b.rowHeight, margin = _b.margin;
-        var renderItem = layoutItemForkey(layout, child.key); //TODO:可以优化速度，这一步不是必须;
-        if (renderItem) {
+        if (mapLayout) {
+            var renderItem = layoutItemForkey(mapLayout, child.key);
             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, static: renderItem.static, onResizing: this.onResizing, onResizeStart: this.onResizeStart, onResizeEnd: this.onResizeEnd, dragType: dragType, handle: renderItem.handle, canDrag: renderItem.canDrag, canResize: renderItem.canResize }, child));
@@ -181,6 +215,9 @@ var Dragact = /** @class */ (function (_super) {
     Dragact.prototype.getLayout = function () {
         return this.state.layout;
     };
+    //api
+    Dragact.prototype.deleteItem = function (key) {
+    };
     return Dragact;
 }(React.Component));
 export { Dragact };

dist/lib/util/collison.js

@@ -53,41 +53,15 @@ export var layoutCheck = function (layout, layoutItem, key, fristItemkey, moving
                      */
                     offsetY = item.GridY;
                 }
-                /**
-                 * 物体向下移动的时候
-                 */
-                if (moving > 0) {
-                    if (layoutItem.GridY + layoutItem.h < item.GridY) {
-                        var collision_1;
-                        var copy_1 = __assign({}, item);
-                        while (true) {
-                            var newLayout = layout.filter(function (item) {
-                                if (item.key !== key && (item.key !== copy_1.key)) {
-                                    return item;
-                                }
-                            });
-                            collision_1 = getFirstCollison(newLayout, copy_1);
-                            if (collision_1) {
-                                offsetY = collision_1.GridY + collision_1.h;
-                                break;
-                            }
-                            else {
-                                copy_1.GridY--;
-                            }
-                            if (copy_1.GridY < 0) {
-                                offsetY = 0;
-                                break;
-                            }
-                        }
-                    }
-                }
-                movedItem.push(__assign({}, item, { GridY: offsetY, isUserMove: false }));
-                return __assign({}, item, { GridY: offsetY, isUserMove: false });
+                // const newItem = { ...item, GridX: layoutItem.GridX, GridY: offsetY, isUserMove: false };
+                var newItem = __assign({}, item, { GridY: offsetY, isUserMove: false });
+                movedItem.push(newItem);
+                return newItem;
             }
         }
         else if (fristItemkey === key) {
             /**永远保持用户移动的块是 isUserMove === true */
-            return __assign({}, item, { GridX: layoutItem.GridX, GridY: layoutItem.GridY, isUserMove: true, w: layoutItem.w, h: layoutItem.h });
+            return __assign({}, item, layoutItem);
         }
         return item;
     });

dist/lib/util/compact.js

@@ -39,15 +39,30 @@ export var compactItem = function (finishedLayout, item) {
  * 压缩layout，使得每一个元素都会紧挨着边界或者相邻的元素
  * @param {*} layout
  */
-export var compactLayout = function (layout) {
-    var sorted = sortLayout(layout);
+export var compactLayout = function (layout, movingItem) {
+    var sorted = sortLayout(layout); //把静态的放在前面
     var needCompact = Array(layout.length);
     var compareList = [];
+    var mapLayout = {};
     for (var i = 0, length_1 = sorted.length; i < length_1; i++) {
         var finished = compactItem(compareList, sorted[i]);
-        finished.isUserMove = false;
+        if (movingItem) {
+            if (movingItem.UniqueKey === finished.key) {
+                movingItem.GridX = finished.GridX;
+                movingItem.GridY = finished.GridY;
+                finished.isUserMove = true;
+            }
+            else
+                finished.isUserMove = false;
+        }
+        else
+            finished.isUserMove = false;
         compareList.push(finished);
         needCompact[i] = finished;
+        mapLayout[finished.key + ''] = finished;
     }
-    return needCompact;
+    return {
+        compacted: needCompact,
+        mapLayout: mapLayout
+    };
 };

dist/lib/util/initiate.js

@@ -14,17 +14,16 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
  * @param {*} GridY
  * @param {*} isUserMove
  */
-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;
-            item.isUserMove = isUserMove;
-            return item;
+export var syncLayout = function (layout, movingItem) {
+    for (var idx in layout) {
+        if (layout[idx].key === movingItem.UniqueKey) {
+            layout[idx].GridX = movingItem.GridX;
+            layout[idx].GridY = movingItem.GridY;
+            layout[idx].isUserMove = true;
+            break;
         }
-        return item;
-    });
-    return newlayout;
+    }
+    return layout;
 };
 /**
  * 初始化的时候调用
@@ -45,9 +44,5 @@ export var MapLayoutTostate = function (layout, children) {
  * @param {*} key
  */
 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];
-        }
-    }
+    return layout[key];
 };

src/SortableList/index.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { DragactList } from '../lib/dragactList';
+import { Dnd } from '../lib/dragger/dragapi';
+// import { GridItemEvent } from '../lib/GridItem';
+
+// const Words = [
+//     { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
+//     { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
+//     { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
+//     { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
+//     { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
+// ]
+
+
+// const Cell = (props: any) => {
+//     const item = props.item;
+//     return (
+//         <div className='layout-Cell'>
+//             <img src={item.img} style={{ width: 45, height: 45 }} draggable={false} alt='card'></img>
+//             <div style={{ paddingLeft: 12, color: '#595959' }}>{item.content}</div>
+//         </div>
+//     )
+// }
+
+
+
+// const checkIn = (point: any, rect: ClientRect) => {
+//     const { clientX, clientY } = point;
+//     var In = false;
+//     if (clientX <= rect.left + rect.width && clientX > rect.left) {
+//         if (clientY <= rect.top + rect.height && clientY > rect.top) {
+//             // console.log(point);
+//             In = true;
+//         }
+//     }
+
+
+//     In ? console.log('进来') : ''
+
+// }
+
+// export class SortableList extends React.Component<{}, {}> {
+//     one: DragactList | null;
+//     two: DragactList | null;
+
+
+//     onDrag = (e: GridItemEvent) => {
+
+//         const ref = this.one && this.one.getReact();
+//         if (ref) {
+//             checkIn({ clientX: e.event.clientX, clientY: e.event.clientY }, ref)
+//         }
+
+//     }
+
+//     render() {
+//         return (
+//             <div style={{ display: 'flex', justifyContent: 'center' }}>
+//                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+//                     <h1 style={{ textAlign: 'center' }}>Sorted Table Demo</h1>
+//                     <DragactList width={400} rowHeight={60} margin={[2, 2]} onDrag={this.onDrag} className='normal-layout' ref={node => this.one = node}>
+//                         {Words.map((el, index) => {
+//                             return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: 0, w: 1, h: 1, canResize: false }} />
+//                         })}
+//                     </DragactList>
+//                     <DragactList width={400} rowHeight={60} margin={[2, 2]} className='normal-layout' ref={node => this.two = node}>
+//                         {Words.map((el, index) => {
+//                             return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: 0, w: 1, h: 1, canResize: false }} />
+//                         })}
+//                     </DragactList>
+//                 </div>
+//             </div>
+//         )
+//     }
+
+// }
+
+export class SortableList extends React.Component<{}, {}> {
+    one: DragactList | null;
+    two: DragactList | null;
+    state = {
+        hidden: 100
+    }
+
+    onDrag = (e: any) => {
+        console.log(e.nativeEvent)
+        this.setState({
+            hidden: 70
+        })
+    }
+    onDragEnd = () => {
+        this.setState({
+            hidden: 100
+        })
+    }
+
+    render() {
+        return (
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <Dnd><div>asdasd</div></Dnd>
+
+            </div>
+        )
+    }
+}
+

src/index.tsx

@@ -6,22 +6,25 @@ import { SortedTableWithStatic } from "./StaticHeader/index";
 import { LayoutRestore } from "./LayoutRestore/index";
 import { HandleLayout } from "./HandleLayout/index";
 import { AddRemove } from "./AddRemove/index";
+import { SortableList } from "./SortableList/index";
 import './index.css'
 
 
+
 const DemoMap: any = {
     normalLayout: <LayoutDemo />,
     SortedTable: <SortedTable />,
     StaticHeader: <SortedTableWithStatic />,
     LayoutRestore: <LayoutRestore />,
     HandleLayout: <HandleLayout />,
-    AddRemove: <AddRemove />
+    AddRemove: <AddRemove />,
+    SortableList: <SortableList />
 }
 
 class DemoDispatcher extends React.Component<{}, {}> {
 
     state = {
-        demo: <LayoutDemo />
+        demo: <SortableList />
     }
 
     handleLayoutChange = (demoName: string) => {
@@ -41,6 +44,7 @@ class DemoDispatcher extends React.Component<{}, {}> {
                     <button onClick={() => this.handleLayoutChange('LayoutRestore')}>LayoutRestore</button>
                     <button onClick={() => this.handleLayoutChange('HandleLayout')}>HandleLayout</button>
                     <button onClick={() => this.handleLayoutChange('AddRemove')}>AddRemove</button>
+                    <button onClick={() => this.handleLayoutChange('SortableList')}>SortableList</button>
                 </div>
                 {this.state.demo}
             </div>

src/lib/dragact.tsx

@@ -362,8 +362,5 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
 
     //api
     deleteItem(key: any) {
-
-
-
     }
 }

src/lib/dragactList.tsx

@@ -0,0 +1,369 @@
+import * as React from "react";
+import GridItem, { GridItemEvent } from './GridItem'
+import { compactLayout } from './util/compact';
+import { getMaxContainerHeight } from './util/sort';
+import { layoutCheck } from './util/collison';
+import { correctLayout } from './util/correction';
+import { getDataSet, stringJoin } from './utils';
+import { layoutItemForkey, syncLayout } from './util/initiate';
+
+import './style.css';
+
+
+export interface DragactLayoutItem {
+    GridX: number
+    GridY: number
+    static?: Boolean
+    w: number
+    h: number
+    isUserMove?: Boolean
+    key?: number | string
+    handle?: Boolean
+    canDrag?: Boolean
+    canResize?: Boolean
+}
+
+export interface DragactProps {
+    /** 
+     * 容器的宽度
+    */
+    width: number,
+
+    /**容器内每个元素的最小高度 */
+    rowHeight: number,
+    /**
+     * 容器内部的padding
+     */
+    padding?: number,
+
+    children: any[] | any
+
+
+    // 
+    // interface GridItemEvent {
+    //     event: any //浏览器拖动事件
+    //     GridX: number //在布局中的x格子  
+    //     GridY: number //在布局中的y格子  
+    //     w: number //元素的宽度
+    //     h: number //元素的高度
+    //     UniqueKey: string | number //元素的唯一key
+    // }
+
+    /**
+     * 拖动开始的回调
+     */
+    onDragStart?: (event: GridItemEvent) => void
+
+    /**
+     * 拖动中的回调
+     */
+    onDrag?: (event: GridItemEvent) => void
+
+    /**
+     * 拖动结束的回调
+     */
+    onDragEnd?: (event: GridItemEvent) => void
+
+    /**
+     * 每个元素的margin,第一个参数是左右，第二个参数是上下
+     */
+    margin: [number, number]
+
+    /** 
+     * layout的名字
+    */
+    className: number | string
+}
+
+export interface mapLayout {
+    [key: string]: DragactLayoutItem
+}
+
+interface DragactState {
+    GridXMoving: number
+    GridYMoving: number
+    wMoving: number
+    hMoving: number
+    placeholderShow: Boolean
+    placeholderMoving: Boolean
+    layout: DragactLayoutItem[]
+    containerHeight: number
+    dragType: 'drag' | 'resize'
+    mapLayout: mapLayout | undefined
+    col: number
+
+}
+
+export class DragactList extends React.Component<DragactProps, DragactState> {
+    dragact: HTMLDivElement | null
+
+    constructor(props: DragactProps) {
+        super(props)
+        this.onDrag = this.onDrag.bind(this)
+        this.onDragStart = this.onDragStart.bind(this)
+        this.onDragEnd = this.onDragEnd.bind(this)
+
+
+        const layout = getDataSet(props.children);
+
+        this.state = {
+            GridXMoving: 0,
+            GridYMoving: 0,
+            wMoving: 0,
+            hMoving: 0,
+            placeholderShow: false,
+            placeholderMoving: false,
+            layout: layout,
+            containerHeight: 500,
+            dragType: 'drag',
+            mapLayout: undefined,
+            col: 1
+        }
+    }
+    onResizeStart = (layoutItem: GridItemEvent) => {
+        const { GridX, GridY, w, h } = layoutItem
+        const sync = syncLayout(this.state.layout, layoutItem);
+        this.setState({
+            GridXMoving: GridX,
+            GridYMoving: GridY,
+            wMoving: w,
+            hMoving: h,
+            placeholderShow: true,
+            placeholderMoving: true,
+            layout: sync,
+            dragType: 'resize'
+        })
+    }
+
+    onResizing = (layoutItem: GridItemEvent) => {
+
+        const newLayout = layoutCheck(this.state.layout, layoutItem, layoutItem.UniqueKey, layoutItem.UniqueKey, 0);
+
+        const { compacted, mapLayout } = compactLayout(newLayout, layoutItem)
+
+        this.setState({
+            layout: compacted,
+            wMoving: layoutItem.w,
+            hMoving: layoutItem.h,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
+        })
+    }
+
+    onResizeEnd = (layoutItem: GridItemEvent) => {
+        const { compacted, mapLayout } = compactLayout(this.state.layout, undefined)
+        this.setState({
+            placeholderShow: false,
+            layout: compacted,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
+        })
+        this.props.onDragEnd && this.props.onDragEnd(layoutItem);
+    }
+
+    onDragStart(bundles: GridItemEvent) {
+        const { GridX, GridY, w, h } = bundles
+
+        const newlayout = syncLayout(this.state.layout, bundles)
+
+        this.setState({
+            GridXMoving: GridX,
+            GridYMoving: GridY,
+            wMoving: w,
+            hMoving: h,
+            placeholderShow: true,
+            placeholderMoving: true,
+            layout: newlayout,
+            dragType: 'drag'
+        })
+        this.props.onDragStart && this.props.onDragStart(bundles)
+    }
+
+    onDrag(layoutItem: GridItemEvent) {
+        const { GridY, UniqueKey } = layoutItem
+        const moving = GridY - this.state.GridYMoving
+
+        const newLayout = layoutCheck(this.state.layout, layoutItem, UniqueKey, UniqueKey/*用户移动方块的key */, moving)
+        const { compacted, mapLayout } = compactLayout(newLayout, layoutItem)
+
+        this.setState({
+            GridXMoving: layoutItem.GridX,
+            GridYMoving: layoutItem.GridY,
+            layout: compacted,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
+        })
+        this.props.onDrag && this.props.onDrag(layoutItem);
+    }
+
+    onDragEnd(layoutItem: GridItemEvent) {
+
+        const { compacted, mapLayout } = compactLayout(this.state.layout, undefined)
+
+        this.setState({
+            placeholderShow: false,
+            layout: compacted,
+            mapLayout: mapLayout,
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
+        })
+
+        this.props.onDragEnd && this.props.onDragEnd(layoutItem);
+    }
+    renderPlaceholder() {
+        if (!this.state.placeholderShow) return null
+        var { width, padding, rowHeight, margin } = this.props
+        const { GridXMoving, GridYMoving, wMoving, hMoving, placeholderMoving, dragType, col } = this.state
+
+        if (!padding) padding = 0;
+        return (
+            <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}
+                canDrag={false}
+                canResize={false}
+            />
+        )
+    }
+
+    componentWillReceiveProps(nextProps: any) {
+        if (this.props.children.length > nextProps.children.length) { //remove
+            const mapLayoutCopy = { ...this.state.mapLayout };
+            nextProps.children.forEach((child: any) => {
+                if ((mapLayoutCopy as any)[child.key] !== void 666) delete (mapLayoutCopy as any)[child.key];
+            })
+            for (const key in mapLayoutCopy) {
+                const newLayout = this.state.layout.filter((child) => {
+                    if (child.key !== key) return child
+                })
+                const { compacted, mapLayout } = compactLayout(newLayout, undefined);
+                this.setState({
+                    containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
+                    layout: compacted,
+                    mapLayout
+                })
+            }
+        }
+
+        if (this.props.children.length < nextProps.children.length) { //add
+            var item;
+            for (const idx in nextProps.children) {
+                const i = nextProps.children[idx];
+                if (this.state.mapLayout && !this.state.mapLayout[i.key]) {
+                    item = i;
+                    break;
+                }
+            }
+            if (item !== void 666) {
+                const dataSet = { ...item.props['data-set'], isUserMove: false, key: item.key };
+                var newLayout = [...this.state.layout, dataSet]
+                newLayout = correctLayout(newLayout, this.state.col)
+                const { compacted, mapLayout } = compactLayout(newLayout, undefined);
+                console.log(mapLayout)
+                // console.log(layout)
+                this.setState({
+                    containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
+                    layout: compacted,
+                    mapLayout
+                })
+            }
+        }
+
+    }
+
+
+    componentDidMount() {
+
+        setTimeout(() => {
+            let layout = correctLayout(this.state.layout, this.state.col)
+            const { compacted, mapLayout } = compactLayout(layout, undefined);
+            this.setState({
+                layout: compacted,
+                mapLayout: mapLayout,
+                containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
+            })
+        }, 1);
+    }
+
+    getGridItem(child: any, index: number) {
+        const { dragType, mapLayout, col } = this.state
+        var { width, padding, rowHeight, margin } = this.props;
+        if (mapLayout) {
+            const renderItem = layoutItemForkey(mapLayout, child.key);
+            if (!padding) padding = 0;
+            return (
+                <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}
+                    handle={renderItem.handle}
+                    canDrag={renderItem.canDrag}
+                    canResize={renderItem.canResize}
+                >
+                    {child}
+                </GridItem >
+            )
+        }
+    }
+
+    render() {
+        const { width, className } = this.props;
+        const { containerHeight } = this.state;
+
+        return (
+            <div
+                className={stringJoin('DraggerLayout', className + '')}
+                style={{ left: 100, width: width, height: containerHeight, zIndex: 1 }}
+                ref={node => this.dragact = node}
+            >
+                {React.Children.map(this.props.children,
+                    (child, index) => this.getGridItem(child, index)
+                )}
+                {this.renderPlaceholder()}
+            </div>
+        )
+    }
+
+    //api
+    getLayout() {
+        return this.state.layout;
+    }
+
+    getReact = () => {
+        if (this.dragact) {
+            return this.dragact.getClientRects()[0];
+        }
+    }
+
+    //api
+    deleteItem(key: any) {
+
+
+
+    }
+}

src/lib/dragger/dragapi.tsx

@@ -0,0 +1,348 @@
+import * as React from "react";
+import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds, Bound } from '../utils'
+
+
+const doc = document
+
+
+
+interface DraggerProps {
+
+    className?: string;
+
+    /**
+    * 给予元素一个x,y的初始位置，单位是px
+    */
+    x?: number,
+    y?: number,
+
+    /** 
+     * 拖动范围限制
+     * 如果不规定范围，那么子元素就可以随意拖动不受限制
+     * 1.可以提供自定义的范围限制
+     * 2.也可以提供父类为边框的范围限制(string === parent)
+     */
+    bounds?: Bound | 'parent',
+
+    /**
+         * 以网格的方式移动，每次移动并不是平滑的移动
+         * [20,30]，鼠标x轴方向移动了20 px ，y方向移动了30 px，整个子元素才会移动
+         */
+    grid?: [number, number],
+
+
+    /**只允许移动x轴 */
+    /**只允许移动y轴 */
+    allowX?: Boolean,
+    allowY?: Boolean,
+
+
+    /**
+    * 是否由用户移动
+    * 可能是通过外部props改变
+    */
+    isUserMove?: Boolean,
+
+    /**
+     * 生命周期回调
+     */
+    onDragStart?: (x: number, y: number) => void,
+    onMove?: (event: MouseEvent | TouchEvent, x: number, y: number) => void,
+    onDragEnd?: (event: MouseEvent | TouchEvent, x: number, y: number) => void,
+
+    onResizeStart?: (event: any, x: number, y: number) => void,
+    onResizing?: (event: MouseEvent | TouchEvent, x: number, y: number) => void
+    onResizeEnd?: (event: MouseEvent | TouchEvent, x: number, y: number) => void
+
+    style?: React.CSSProperties,
+
+    w?: number,
+    h?: number,
+
+    handle?: Boolean;
+
+    canDrag?: Boolean;
+
+    canResize?: Boolean;
+}
+
+export class Dnd extends React.Component<DraggerProps, {}> {
+    parent: any;
+    self: any;
+
+    constructor(props: DraggerProps) {
+        super(props)
+        // this.move = this.move.bind(this)
+        // this.onDragEnd = this.onDragEnd.bind(this)
+        this.parent = null;
+        this.self = null;
+    }
+    /**
+     * 初始变量设置
+     */
+    static defaultProps = {
+        allowX: true,
+        allowY: true,
+        isUserMove: true
+    }
+
+    state = {
+        /** x轴位移，单位是px */
+        x: 0,
+
+        /** y轴位移，单位是px */
+        y: 0,
+
+        /**鼠标点击元素的原始位置，单位是px */
+        originX: 0,
+        originY: 0,
+
+        isUserMove: true,
+
+        /**已经移动的位移，单位是px */
+        lastX: 0,
+        lastY: 0,
+
+        /**堆叠的层级 */
+        zIndex: 1,
+
+        w: 0,
+        h: 0,
+
+        lastW: 0,
+        lastH: 0
+    }
+
+
+
+    move = (event: any) => {
+
+        let { lastX, lastY } = this.state
+        /*  event.client - this.state.origin 表示的是移动的距离,
+        *   elX表示的是原来已经有的位移
+        */
+
+
+        let deltaX, deltaY;
+        deltaX = event.clientX - this.state.originX + lastX
+        deltaY = event.clientY - this.state.originY + lastY
+
+        const { bounds } = this.props
+        if (bounds) {
+            /**
+            * 如果用户指定一个边界，那么在这里处理
+            */
+            let NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
+
+            /**
+             * 网格式移动范围设定，永远移动 n 的倍数
+             * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
+             */
+            const { grid } = this.props
+            if (Array.isArray(grid) && grid.length === 2) {
+                deltaX = Math.round(deltaX / grid[0]) * grid[0]
+                deltaY = Math.round(deltaY / grid[1]) * grid[1]
+            }
+
+            if (this.props.bounds === 'parent') {
+                NewBounds = {
+                    left: int(this.parent.style.paddingLeft) + int(this.self.style.marginLeft) - this.self.offsetLeft,
+                    top: int(this.parent.style.paddingTop) + int(this.self.style.marginTop) - this.self.offsetTop,
+                    right: innerWidth(this.parent) - outerWidth(this.self) - this.self.offsetLeft +
+                        int(this.parent.style.paddingRight) - int(this.self.style.marginRight),
+                    bottom: innerHeight(this.parent) - outerHeight(this.self) - this.self.offsetTop +
+                        int(this.parent.style.paddingBottom) - int(this.self.style.marginBottom)
+                }
+            }
+
+            /**
+             * 保证不超出右边界和底部
+             * keep element right and bot can not cross the bounds
+             */
+            if (NewBounds !== 'parent') deltaX = Math.min(deltaX, NewBounds.right)
+            if (NewBounds !== 'parent') deltaY = Math.min(deltaY, NewBounds.bottom)
+
+
+            /**
+             * 保证不超出左边和上边
+             * keep element left and top can not cross the bounds
+             */
+            if (NewBounds !== 'parent') deltaX = Math.max(deltaX, NewBounds.left)
+            if (NewBounds !== 'parent') deltaY = Math.max(deltaY, NewBounds.top)
+        }
+
+
+        /**如果设置了x,y限制 */
+        deltaX = this.props.allowX ? deltaX : 0
+        deltaY = this.props.allowY ? deltaY : 0
+
+        /**移动时回调，用于外部控制 */
+        if (this.props.onMove) this.props.onMove(event, deltaX, deltaY)
+
+
+        console.log(deltaX, deltaY)
+        this.setState({
+            x: deltaX,
+            y: deltaY
+        })
+    }
+
+    onDragStart = (event: any) => {
+        /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
+        doc.body.style.userSelect = 'none'
+
+        if (this.props.handle) {
+            if (event.target.id !== 'dragact-handle') return
+        }
+
+        doc.addEventListener('mousemove', this.move);
+        doc.addEventListener('mouseup', this.onDragEnd);
+
+        // /**
+        //  * 把监听事件的回掉函数，绑定在document上
+        //  * 当设置边界的时候，用户鼠标会离开元素的范围
+        //  * 绑定在document上可以使得其依旧能够监听
+        //  * 如果绑定在元素上，则鼠标离开元素，就不会再被监听了
+        //  */
+        // if (event.type.indexOf('mouse') >= 0) {
+        //     doc.addEventListener('mousemove', this.move);
+        //     doc.addEventListener('mouseup', this.onDragEnd);
+        // } else {
+        //     doc.addEventListener('touchmove', this.move)
+        //     doc.addEventListener('touchend', this.onDragEnd)
+        // }
+
+        // if (this.props.bounds === 'parent' &&
+        //     /**为了让 这段代码不会重复执行 */
+        //     (typeof this.parent === 'undefined' || this.parent === null)) {
+        //     /**
+        //      * 在这里我们将父节点缓存下来，保证当用户鼠标离开拖拽区域时，我们仍然能获取到父节点
+        //      * what we do here is 
+        //      * making sure that we still can retrieve our parent when user's mouse left this node.
+        //      */
+
+        //     this.parent = (event as any).currentTarget.offsetParent //todo
+
+        //     /**
+        //      * 我们自己
+        //      * ourself
+        //      */
+        //     this.self = event.currentTarget
+        // }
+
+        // this.props.onDragStart && this.props.onDragStart(this.state.x, this.state.y)
+
+
+        let originX, originY;
+        originX = (event).nativeEvent.clientX
+        originY = (event).nativeEvent.clientY
+
+        this.setState({
+            originX: originX,
+            originY: originY,
+            lastX: this.state.x,
+            lastY: this.state.y,
+            zIndex: 10
+        })
+    }
+
+    onDragEnd = (event: any) => {
+        /** 取消用户选择限制，用户可以重新选择 */
+        doc.body.style.userSelect = ''
+        this.parent = null
+        this.self = null
+
+        this.setState({
+            zIndex: 1
+        })
+
+        this.props.onDragEnd && this.props.onDragEnd(event, this.state.x, this.state.y)
+    }
+
+
+    componentDidMount() {
+        /** 
+         * 这个函数只会调用一次 
+         * 这个只是一个临时的解决方案，因为这样会使得元素进行两次刷新
+        */
+        if (typeof this.props.x === 'number' &&
+            typeof this.props.y === 'number') {
+            this.setState({
+                x: this.props.x,
+                y: this.props.y
+            })
+        }
+    }
+
+    componentWillReceiveProps(nextProps: DraggerProps) {
+        /**
+         * 外部props 改变的时候更新元素的内部位置
+         * 这个api设计其实很不好
+         * 以后可能会修改掉
+         */
+        const { isUserMove } = nextProps
+        if (!isUserMove) {
+
+            if (typeof nextProps.x === 'number' &&
+                typeof nextProps.y === 'number') {
+                this.setState({
+                    x: nextProps.x,
+                    y: nextProps.y,
+                    lastX: nextProps.x,
+                    lastY: nextProps.y,
+                    w: nextProps.w,
+                    h: nextProps.h
+                })
+            }
+        }
+    }
+
+    mixin = () => {
+        var dragMix = {
+            onDragStart: this.onDragStart,
+        }
+
+        var resizeMix = {}
+
+        return {
+            dragMix, resizeMix
+        };
+    }
+
+    render() {
+        var { x, y } = this.state
+        var { style, className } = this.props
+        // 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;
+        //     }
+        // }
+        // if (style) {
+        //     //使得初始化的时候，不会有从0-1缩放动画
+        //     w = w === 0 ? style.width : w;
+        //     h = h === 0 ? style.height : h;
+        // }
+        const { dragMix } = this.mixin();
+
+        // console.log(x,y)
+        /**主要是为了让用户定义自己的className去修改css */
+        const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
+        return (
+            <div className={`${fixedClassName}WrapDragger`}
+                style={{
+                    ...style,
+                    position: 'absolute',
+                    transform: `translate(${x}px,${y}px)`,
+                }}
+                draggable={true}
+                {...dragMix}
+            >
+                {React.Children.only(this.props.children)}
+            </div>
+        )
+    }
+}

src/lib/util/correction.ts

@@ -4,6 +4,7 @@ import { GridItemEvent } from "../gridItem";
 
 
 export const checkInContainer = (GridX: number, GridY: number, col: number, w: number) => {
+
     /**防止元素出container */
     if (GridX + w > col - 1) GridX = col - w //右边界
     if (GridX < 0) GridX = 0//左边界