优化了手感，使用reselect优化算法

dist/lib/GridItem.js

@@ -136,7 +136,6 @@ var GridItem = /** @class */ (function (_super) {
         var _a = this.props, w = _a.w, h = _a.h, style = _a.style, bounds = _a.bounds, GridX = _a.GridX, GridY = _a.GridY, handle = _a.handle, canDrag = _a.canDrag, canResize = _a.canResize;
         var _b = this.calGridItemPosition(GridX, GridY), x = _b.x, y = _b.y;
         var _c = this.calWHtoPx(w, h), wPx = _c.wPx, hPx = _c.hPx;
-        console.log('渲染');
         return (React.createElement(Dragger, { style: __assign({}, style, { width: wPx, height: hPx, position: 'absolute', transition: this.props.isUserMove ? '' : 'all .2s ease-out', zIndex: this.props.isUserMove ? (this.props.dragType === 'drag' ? 10 : 2) : 2 }), onDragStart: this.onDragStart, onMove: this.onDrag, onDragEnd: this.onDragEnd, onResizeStart: this.onResizeStart, onResizing: this.onResizing, onResizeEnd: this.onResizeEnd, x: x, y: y, w: wPx, h: hPx, isUserMove: this.props.isUserMove, bounds: bounds, handle: handle, canDrag: canDrag, canResize: canResize },
             React.createElement("div", { style: { height: '100%', width: "100%" } }, React.Children.map(this.props.children, function (child) { return child; }))));
     };

dist/lib/dragact.js

@@ -31,46 +31,44 @@ var Dragact = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this.onResizeStart = function (layoutItem) {
             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,
-                wMoving: w,
-                hMoving: h,
-                placeholderShow: true,
-                placeholderMoving: true,
-                layout: sync,
-                dragType: 'resize'
-            });
+            if (_this.state.mapLayout) {
+                var newlayout = syncLayout(_this.state.mapLayout, layoutItem);
+                _this.setState({
+                    GridXMoving: GridX,
+                    GridYMoving: GridY,
+                    wMoving: w,
+                    hMoving: h,
+                    placeholderShow: true,
+                    placeholderMoving: true,
+                    mapLayout: newlayout,
+                    dragType: 'resize'
+                });
+            }
         };
         _this.onResizing = function (layoutItem) {
             var newLayout = layoutCheck(_this.state.layout, layoutItem, layoutItem.UniqueKey, layoutItem.UniqueKey, 0);
-            var _a = compactLayout(newLayout, layoutItem), compacted = _a.compacted, mapLayout = _a.mapLayout;
+            var _a = compactLayout(newLayout, layoutItem, _this.state.mapLayout), 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])
+                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1], _this.state.containerHeight)
             });
         };
         _this.onResizeEnd = function (layoutItem) {
-            var _a = compactLayout(_this.state.layout, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
+            var _a = compactLayout(_this.state.layout, undefined, _this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
             _this.setState({
                 placeholderShow: false,
                 layout: compacted,
                 mapLayout: mapLayout,
-                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1])
+                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1], _this.state.containerHeight)
             });
             _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);
-        // const layout = props.layout ?
-        //     MapLayoutTostate(props.layout, props.children)
-        //     :
-        //     getDataSet(props.children);
         var layout = props.layout;
         _this.state = {
             GridXMoving: 0,
@@ -88,40 +86,42 @@ var Dragact = /** @class */ (function (_super) {
     }
     Dragact.prototype.onDragStart = function (bundles) {
         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,
-            wMoving: w,
-            hMoving: h,
-            placeholderShow: true,
-            placeholderMoving: true,
-            layout: newlayout,
-            dragType: 'drag'
-        });
+        if (this.state.mapLayout) {
+            var newlayout = syncLayout(this.state.mapLayout, bundles);
+            this.setState({
+                GridXMoving: GridX,
+                GridYMoving: GridY,
+                wMoving: w,
+                hMoving: h,
+                placeholderShow: true,
+                placeholderMoving: true,
+                mapLayout: newlayout,
+                dragType: 'drag'
+            });
+        }
         this.props.onDragStart && this.props.onDragStart(bundles);
     };
     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 _a = compactLayout(newLayout, layoutItem), compacted = _a.compacted, mapLayout = _a.mapLayout;
+        var _a = compactLayout(newLayout, layoutItem, this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
         this.setState({
             GridXMoving: layoutItem.GridX,
             GridYMoving: layoutItem.GridY,
             layout: compacted,
             mapLayout: mapLayout,
-            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1], this.state.containerHeight)
         });
         this.props.onDrag && this.props.onDrag(layoutItem);
     };
     Dragact.prototype.onDragEnd = function (layoutItem) {
-        var _a = compactLayout(this.state.layout, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
+        var _a = compactLayout(this.state.layout, undefined, this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
         this.setState({
             placeholderShow: false,
             layout: compacted,
             mapLayout: mapLayout,
-            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1])
+            containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1], this.state.containerHeight)
         });
         this.props.onDragEnd && this.props.onDragEnd(layoutItem);
     };
@@ -148,9 +148,9 @@ var Dragact = /** @class */ (function (_super) {
                     if (child.key !== key)
                         return child;
                 });
-                var _a = compactLayout(newLayout_1, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
+                var _a = compactLayout(newLayout_1, undefined, this_1.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
                 this_1.setState({
-                    containerHeight: getMaxContainerHeight(compacted, this_1.props.rowHeight, this_1.props.margin[1]),
+                    containerHeight: getMaxContainerHeight(compacted, this_1.props.rowHeight, this_1.props.margin[1], this_1.state.containerHeight),
                     layout: compacted,
                     mapLayout: mapLayout
                 });
@@ -173,11 +173,9 @@ var Dragact = /** @class */ (function (_super) {
                 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)
+                var _a = compactLayout(newLayout, undefined, this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
                 this.setState({
-                    containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1]),
+                    containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1], this.state.containerHeight),
                     layout: compacted,
                     mapLayout: mapLayout
                 });
@@ -188,11 +186,11 @@ var Dragact = /** @class */ (function (_super) {
         var _this = this;
         setTimeout(function () {
             var layout = correctLayout(_this.state.layout, _this.props.col);
-            var _a = compactLayout(layout, undefined), compacted = _a.compacted, mapLayout = _a.mapLayout;
+            var _a = compactLayout(layout, undefined, _this.state.mapLayout), compacted = _a.compacted, mapLayout = _a.mapLayout;
             _this.setState({
                 layout: compacted,
                 mapLayout: mapLayout,
-                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1])
+                containerHeight: getMaxContainerHeight(compacted, _this.props.rowHeight, _this.props.margin[1], _this.state.containerHeight)
             });
         }, 1);
     };

dist/lib/dragger/index.js

@@ -101,9 +101,16 @@ var Dragger = /** @class */ (function (_super) {
             /**如果设置了x,y限制 */
             deltaX = _this.props.allowX ? deltaX : 0;
             deltaY = _this.props.allowY ? deltaY : 0;
+            /**
+             * 调整手感
+             * 无论是向上移动还是向下移动，全部都是根据重力中心
+             * */
+            var height = _this.refs['dragger'].getClientRects()[0].height;
+            var upNdown = _this.state.y - deltaY;
+            var fixY = deltaY + (upNdown >= 0 ? 0 : height / 2);
             /**移动时回调，用于外部控制 */
             if (_this.props.onMove)
-                _this.props.onMove(event, deltaX, deltaY);
+                _this.props.onMove(event, deltaX, fixY);
             _this.setState({
                 x: deltaX,
                 y: deltaY
@@ -306,7 +313,7 @@ var Dragger = /** @class */ (function (_super) {
         var _c = this.mixin(), dragMix = _c.dragMix, resizeMix = _c.resizeMix;
         /**主要是为了让用户定义自己的className去修改css */
         var fixedClassName = typeof className === 'undefined' ? '' : className + ' ';
-        return (React.createElement("div", __assign({ className: fixedClassName + "WrapDragger", style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }) }, dragMix),
+        return (React.createElement("div", __assign({ className: fixedClassName + "WrapDragger", ref: 'dragger', style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }) }, dragMix),
             React.Children.only(this.props.children),
             canResize !== false ?
                 React.createElement("span", __assign({}, resizeMix, { style: {

dist/lib/util/collison.js

@@ -30,45 +30,59 @@ export var getFirstCollison = function (layout, item) {
     }
     return null;
 };
-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;
-            }
-            if (collision(item, layoutItem)) {
-                i.push(item.key);
-                /**
-                 * 这里就是奇迹发生的地方，如果向上移动，那么必须注意的是
-                 * 一格一格的移动，而不是一次性移动
-                 */
-                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) {
+/**
+ * 这个函数带有记忆功能
+ */
+export var layoutCheck = function () {
+    var caches = {};
+    var _layoutCheck = function (layout, layoutItem, key, fristItemkey, moving) {
+        if (layoutItem.GridX === caches.GridX
+            && layoutItem.GridY === caches.GridY
+            && layoutItem.w === caches.w
+            && layoutItem.h === caches.h) {
+            return layout;
+        }
+        caches = __assign({}, layoutItem);
+        var i = [], movedItem = []; /**收集所有移动过的物体 */
+        var newlayout = layout.map(function (item, idx) {
+            if (item.key !== key) {
+                if (item.static) {
+                    return item;
+                }
+                if (collision(item, layoutItem)) {
+                    i.push(item.key);
                     /**
-                     * 元素向上移动时，元素的上面空间不足,则不移动这个元素
-                     * 当元素移动到GridY>所要向上交换的元素时，就不会进入这里，直接交换元素
+                     * 这里就是奇迹发生的地方，如果向上移动，那么必须注意的是
+                     * 一格一格的移动，而不是一次性移动
                      */
-                    offsetY = item.GridY;
+                    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) {
+                        /**
+                         * 元素向上移动时，元素的上面空间不足,则不移动这个元素
+                         * 当元素移动到GridY>所要向上交换的元素时，就不会进入这里，直接交换元素
+                         */
+                        offsetY = item.GridY;
+                    }
+                    // const newItem = { ...item, GridX: layoutItem.GridX, GridY: offsetY, isUserMove: false };
+                    var newItem = __assign({}, item, { GridY: offsetY, isUserMove: false });
+                    movedItem.push(newItem);
+                    return newItem;
                 }
-                // 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, layoutItem);
+            }
+            return item;
+        });
+        /** 递归调用,将layout中的所有重叠元素全部移动 */
+        var length = movedItem.length;
+        for (var c = 0; c < length; c++) {
+            newlayout = _layoutCheck(newlayout, movedItem[c], i[c], fristItemkey, 0);
         }
-        else if (fristItemkey === key) {
-            /**永远保持用户移动的块是 isUserMove === true */
-            return __assign({}, item, layoutItem);
-        }
-        return item;
-    });
-    /** 递归调用,将layout中的所有重叠元素全部移动 */
-    var length = movedItem.length;
-    for (var c = 0; c < length; c++) {
-        newlayout = layoutCheck(newlayout, movedItem[c], i[c], fristItemkey, 0);
-    }
-    return newlayout;
-};
+        return newlayout;
+    };
+    return _layoutCheck;
+}();

dist/lib/util/compact.js

@@ -39,30 +39,46 @@ export var compactItem = function (finishedLayout, item) {
  * 压缩layout，使得每一个元素都会紧挨着边界或者相邻的元素
  * @param {*} 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]);
+export var compactLayout = function () {
+    var _cache = {};
+    return function (layout, movingItem, mapedLayout) {
         if (movingItem) {
-            if (movingItem.UniqueKey === finished.key) {
-                movingItem.GridX = finished.GridX;
-                movingItem.GridY = finished.GridY;
-                finished.isUserMove = true;
+            if (_cache.GridX === movingItem.GridX
+                && _cache.GridY === movingItem.GridY &&
+                _cache.w === movingItem.w &&
+                _cache.h === movingItem.h &&
+                _cache.UniqueKey === movingItem.UniqueKey) {
+                return {
+                    compacted: layout,
+                    mapLayout: mapedLayout
+                };
+            }
+            _cache = 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]);
+            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;
         }
-        else
-            finished.isUserMove = false;
-        compareList.push(finished);
-        needCompact[i] = finished;
-        mapLayout[finished.key + ''] = finished;
-    }
-    return {
-        compacted: needCompact,
-        mapLayout: mapLayout
+        return {
+            compacted: needCompact,
+            mapLayout: mapLayout
+        };
     };
-};
+}();

dist/lib/util/initiate.js

@@ -15,14 +15,18 @@ var __assign = (this && this.__assign) || Object.assign || function(t) {
  * @param {*} isUserMove
  */
 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;
-        }
-    }
+    var key = movingItem.UniqueKey;
+    layout[key].GridX = movingItem.GridX;
+    layout[key].GridY = movingItem.GridY;
+    layout[key].isUserMove = true;
+    // for (const 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 layout;
 };
 /**

dist/lib/util/sort.js

@@ -14,13 +14,25 @@ export var sortLayout = function (layout) {
         return -1;
     });
 };
-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;
-    });
-    var h = quickSort(ar)[ar.length - 1];
-    var height = h * (elementHeight + elementMarginBottom) + elementMarginBottom;
-    return height;
-};
+/**
+ * 这个函数带有记忆功能
+ */
+export var getMaxContainerHeight = function () {
+    var lastOneGridY = 0;
+    return function (layout, elementHeight, elementMarginBottom, currentHeight) {
+        if (elementHeight === void 0) { elementHeight = 30; }
+        if (elementMarginBottom === void 0) { elementMarginBottom = 10; }
+        var length = layout.length;
+        var currentLastOne = layout[length - 1];
+        if (currentLastOne.GridY === lastOneGridY) {
+            return currentHeight;
+        }
+        lastOneGridY = currentLastOne.GridY;
+        var ar = layout.map(function (item) {
+            return item.GridY + item.h;
+        });
+        var h = quickSort(ar)[ar.length - 1];
+        var height = h * (elementHeight + elementMarginBottom) + elementMarginBottom;
+        return height;
+    };
+}();

example/changelog.md

@@ -1,4 +1,8 @@
-v0.1.5
+v0.1.7
+- 优化性能-使用reselect的原理
+- 拖拽手感优化
+
+v0.1.6
 - 修正zIndex的错误
 - 新增拖拽把手
 - 自由选择拖拽和resize

src/lib/dragact.tsx

@@ -114,11 +114,6 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
         this.onDragStart = this.onDragStart.bind(this)
         this.onDragEnd = this.onDragEnd.bind(this)
 
-        // const layout = props.layout ?
-        //     MapLayoutTostate(props.layout, props.children)
-        //     :
-        //     getDataSet(props.children);
-
         const layout = props.layout;
 
         this.state = {
@@ -136,17 +131,19 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     }
     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'
-        })
+        if (this.state.mapLayout) {
+            const newlayout = syncLayout(this.state.mapLayout, layoutItem)
+            this.setState({
+                GridXMoving: GridX,
+                GridYMoving: GridY,
+                wMoving: w,
+                hMoving: h,
+                placeholderShow: true,
+                placeholderMoving: true,
+                mapLayout: newlayout,
+                dragType: 'resize'
+            })
+        }
     }
 
     onResizing = (layoutItem: GridItemEvent) => {
@@ -178,18 +175,22 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     onDragStart(bundles: GridItemEvent) {
         const { GridX, GridY, w, h } = bundles
 
-        const newlayout = syncLayout(this.state.layout, bundles)
+        if (this.state.mapLayout) {
+            const newlayout = syncLayout(this.state.mapLayout, bundles)
+
+
+            this.setState({
+                GridXMoving: GridX,
+                GridYMoving: GridY,
+                wMoving: w,
+                hMoving: h,
+                placeholderShow: true,
+                placeholderMoving: true,
+                mapLayout: newlayout,
+                dragType: 'drag'
+            })
+        }
 
-        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)
     }
 
@@ -284,8 +285,6 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 var newLayout = [...this.state.layout, dataSet]
                 newLayout = correctLayout(newLayout, this.props.col)
                 const { compacted, mapLayout } = compactLayout(newLayout, undefined, this.state.mapLayout);
-                // console.log(mapLayout)
-                // console.log(layout)
                 this.setState({
                     containerHeight: getMaxContainerHeight(compacted, this.props.rowHeight, this.props.margin[1], this.state.containerHeight),
                     layout: compacted,

src/lib/dragger/index.tsx

@@ -117,12 +117,13 @@ export class Dragger extends React.Component<DraggerProps, {}> {
 
     move = (event: any) => {
 
-        let { lastX, lastY } = this.state
+        let { lastX, lastY } = this.state;
         /*  event.client - this.state.origin 表示的是移动的距离,
         *   elX表示的是原来已经有的位移
         */
 
 
+
         let deltaX, deltaY;
         if (event.type.indexOf('mouse') >= 0) {
             deltaX = (event as MouseEvent).clientX - this.state.originX + lastX
@@ -181,8 +182,16 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         deltaX = this.props.allowX ? deltaX : 0
         deltaY = this.props.allowY ? deltaY : 0
 
+
+        /**
+         * 调整手感 
+         * 无论是向上移动还是向下移动，全部都是根据重力中心
+         * */
+        const height = (this.refs['dragger'] as HTMLDivElement).getClientRects()[0].height;
+        const upNdown = this.state.y - deltaY;
+        const fixY = deltaY + (upNdown >= 0 ? 0 : height / 2);
         /**移动时回调，用于外部控制 */
-        if (this.props.onMove) this.props.onMove(event, deltaX, deltaY)
+        if (this.props.onMove) this.props.onMove(event, deltaX, fixY)
 
         this.setState({
             x: deltaX,
@@ -410,6 +419,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
         return (
             <div className={`${fixedClassName}WrapDragger`}
+                ref={'dragger'}
                 style={{
                     ...style,
                     touchAction: 'none!important',

src/lib/gridItem.tsx

@@ -205,7 +205,6 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
         const { w, h, style, bounds, GridX, GridY, handle, canDrag, canResize } = this.props
         const { x, y } = this.calGridItemPosition(GridX, GridY)
         const { wPx, hPx } = this.calWHtoPx(w, h);
-        // console.log('渲染')
         return (
 
             <Dragger

src/lib/util/collison.ts

@@ -16,6 +16,7 @@ export const collision = (a: DragactLayoutItem, b: DragactLayoutItem) => {
 
 /**获取layout中，item第一个碰撞到的物体 */
 export const getFirstCollison = (layout: DragactLayoutItem[], item: DragactLayoutItem) => {
+
     for (let i = 0, length = layout.length; i < length; i++) {
         if (collision(layout[i], item)) {
             return layout[i]
@@ -30,24 +31,20 @@ export const getFirstCollison = (layout: DragactLayoutItem[], item: DragactLayou
  */
 export const layoutCheck = function () {
 
-    const caches: any = {};
+    var caches: any = {};
 
     const _layoutCheck = function (layout: DragactLayoutItem[], layoutItem: GridItemEvent,
         key: string | number, fristItemkey: string | number, moving: number) {
 
-        if (key === caches['initKey']) {
-            if (caches['item']) {
-                if (layoutItem.GridX === caches['item'].GridX
-                    && layoutItem.GridY === caches['item'].GridY
-                    && layoutItem.w === caches['item'].w
-                    && layoutItem.h === caches['item'].h) {
-                    return layout;
-                }
-            }
-            caches['item'] = layoutItem;
-        } else {
-            caches['initKey'] = fristItemkey;
+
+        if (layoutItem.GridX === caches.GridX
+            && layoutItem.GridY === caches.GridY
+            && layoutItem.w === caches.w
+            && layoutItem.h === caches.h) {
+            return layout;
         }
+        caches = { ...layoutItem };
+
         let i: any = [], movedItem: any = []/**收集所有移动过的物体 */
         let newlayout = layout.map((item, idx) => {
             if (item.key !== key) {

src/lib/util/compact.ts

@@ -54,7 +54,6 @@ export const compactLayout = function () {
             }
             _cache = movingItem;
         }
-
         let sorted = sortLayout(layout)//把静态的放在前面
         const needCompact = Array(layout.length)
         const compareList = []

src/lib/util/initiate.ts

@@ -9,15 +9,21 @@ import { GridItemEvent } from "../GridItem";
  * @param {*} GridY 
  * @param {*} isUserMove 
  */
-export const syncLayout = (layout: DragactLayoutItem[], movingItem: GridItemEvent) => {
-    for (const idx in layout) {
-        if (layout[idx].key === movingItem.UniqueKey) {
-            layout[idx].GridX = movingItem.GridX
-            layout[idx].GridY = movingItem.GridY
-            layout[idx].isUserMove = true
-            break;
-        }
-    }
+export const syncLayout = (layout: mapLayout, movingItem: GridItemEvent) => {
+    const key = movingItem.UniqueKey;
+
+    layout[key].GridX = movingItem.GridX;
+    layout[key].GridY = movingItem.GridY
+    layout[key].isUserMove = true;
+
+    // for (const 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 layout
 }