[first] first version done

build/App.js

@@ -3,81 +3,464 @@ import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
 import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
 import _inherits from 'babel-runtime/helpers/inherits';
+import _extends from 'babel-runtime/helpers/extends';
 import React from 'react';
 import PropTypes from 'prop-types';
-import Dragger from './Dragger.js';
-import { int, innerHeight, innerWidth, outerHeight, outerWidth, parseBounds, isNumber } from './utils';
+import GridItem from './GridItem';
 
-var CtmpFather = function (_React$Component) {
-    _inherits(CtmpFather, _React$Component);
+import './style.css';
 
-    function CtmpFather() {
-        _classCallCheck(this, CtmpFather);
+var correctLayout = function correctLayout(layout) {
+    for (var i = 0; i < layout.length; i++) {
+        if (collision(layout[i], layout[i + 1])) {
+            return layoutCheck(layout, layout[i], layout[i].key, layout[i].key, -1);
+        }
+    }
+};
+
+var layoutItemForkey = function layoutItemForkey(layout, key) {
+    for (var i = 0, length = layout.length; i < length; i++) {
+        if (key === layout[i].key) {
+            return layout[i];
+        }
+    }
+};
+
+var MapLayoutTostate = function MapLayoutTostate(layout, children) {
+    return layout.map(function (child, index) {
+        var newChild = _extends({}, child, { isUserMove: true, key: children[index].key });
+        return newChild;
+    });
+};
+
+var syncLayout = function syncLayout(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;
+        }
+        return item;
+    });
+    return newlayout;
+};
+
+var collision = function collision(a, b) {
+    if (a.GridX === b.GridX && a.GridY === b.GridY && a.w === b.w && a.h === b.h) {
+
+        return true;
+    }
+
+    if (a.GridX + a.w <= b.GridX) return false;
+    if (a.GridX >= b.GridX + b.w) return false;
+    if (a.GridY + a.h <= b.GridY) return false;
+    if (a.GridY >= b.GridY + b.h) return false;
+    return true;
+};
+
+var sortLayout = function sortLayout(layout) {
+    return [].concat(layout).sort(function (a, b) {
+        if (a.GridY > b.GridY || a.GridY === b.GridY && a.GridX > b.GridX) {
+            return 1;
+        } else if (a.GridY === b.GridY && a.GridX === b.GridX) {
+            return 0;
+        }
+        return -1;
+    });
+};
+
+/**获取layout中，item第一个碰撞到的物体 */
+var getFirstCollison = function getFirstCollison(layout, item) {
+
+    for (var i = 0, length = layout.length; i < length; i++) {
+
+        if (collision(layout[i], item)) {
+
+            return layout[i];
+        }
+    }
+    return null;
+};
+
+var compactItem = function compactItem(finishedLayout, item) {
+    var newItem = _extends({}, item);
+
+    if (finishedLayout.length === 0) {
+
+        return _extends({}, newItem, { GridY: 0 });
+    }
+    /**
+     * 类似一个递归调用
+     */
+    while (true) {
+        var FirstCollison = getFirstCollison(finishedLayout, newItem);
+        if (FirstCollison) {
+            newItem.GridY = FirstCollison.GridY + FirstCollison.h;
+            return newItem;
+        }
+        newItem.GridY--;
+
+        if (newItem.GridY < 0) return _extends({}, newItem, { GridY: 0 });
+    }
+    return newItem;
+};
+
+var compactLayout = function compactLayout(layout) {
+    var sorted = sortLayout(layout);
+    var needCompact = Array(layout.length);
+    var compareList = [];
+    for (var i = 0, length = sorted.length; i < length; i++) {
+        var finished = compactItem(compareList, sorted[i]);
+        finished.isUserMove = false;
+        compareList.push(finished);
+        needCompact[layout.indexOf(sorted[i])] = finished;
+    }
+    return needCompact;
+};
+
+var layoutCheck = function layoutCheck(layout, layoutItem, key, fristItemkey, moving) {
+    var i = [],
+        movedItem = [];
+    var newlayout = layout.map(function (item, idx) {
+        if (item.key !== key) {
+            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) {
+                    /**
+                     * 元素向上移动时，元素的上面空间不足,则不移动这个元素
+                     * 当元素移动到GridY>所要向上交换的元素时，就不会进入这里，直接交换元素
+                     * 
+                     */
+                    offsetY = item.GridY;
+                    console.log('移动到', offsetY, '操纵的物体key', layoutItem.key, '移动的key', item.key);
+                }
+                if (moving > 0) {
+                    /**
+                     * 这个地方的实现有点奇妙了，moving用于检查最开始移动的方块
+                     * layoutItem.GridY > item.h*(3/4) 这个做会让方块移动比较准确和精确
+                     * 如果是其他数字，很可能会出现不可预计的效果
+                     * 建议取值范围在1/2 ~ 3/4之间
+                     */
+
+                    if (layoutItem.GridY + layoutItem.h < item.GridY) {
+                        (function () {
+                            var collision = void 0;
+                            var copy = _extends({}, item);
+                            while (true) {
+                                var newLayout = layout.filter(function (item) {
+                                    if (item.key !== key && item.key !== copy.key) {
+                                        return item;
+                                    }
+                                });
+                                collision = getFirstCollison(newLayout, copy);
+                                if (collision) {
+                                    offsetY = collision.GridY + collision.h;
+                                    console.log('移动到', offsetY, '操纵的物体底部', copy.key, '碰撞顶部', copy.GridY, 'key', collision.key);
+                                    break;
+                                } else {
+                                    copy.GridY--;
+                                }
+                                if (copy.GridY < 0) {
+                                    console.log('移动到', offsetY, '操纵的物体底部', copy.key, '碰撞顶部', copy.GridY);
+                                    offsetY = 0;
+                                    break;
+                                }
+                            }
+                        })();
+                    }
+                }
+                movedItem.push(_extends({}, item, { GridY: offsetY, isUserMove: false }));
+                return _extends({}, item, { GridY: offsetY, isUserMove: false });
+            }
+        } else if (fristItemkey === key) {
+            return _extends({}, item, { GridX: layoutItem.GridX, GridY: layoutItem.GridY, isUserMove: true });
+        }
+        return item;
+    });
+    /** 递归调用,将layout中的所有重叠元素全部移动 */
+    if (i.length > 0 && movedItem.length > 0) {
+        for (var c = 0; c < Math.min(movedItem.length, i.length); c++) {
+            newlayout = layoutCheck(newlayout, movedItem[c], i[c], fristItemkey, undefined);
+        }
+    }
+    return newlayout;
+};
+
+var DraggerLayout = function (_React$Component) {
+    _inherits(DraggerLayout, _React$Component);
 
-        return _possibleConstructorReturn(this, (CtmpFather.__proto__ || _Object$getPrototypeOf(CtmpFather)).apply(this, arguments));
+    function DraggerLayout(props) {
+        _classCallCheck(this, DraggerLayout);
+
+        var _this = _possibleConstructorReturn(this, (DraggerLayout.__proto__ || _Object$getPrototypeOf(DraggerLayout)).call(this, props));
+
+        _this.state = {
+            GridXMoving: 0,
+            GridYMoving: 0,
+            wMoving: 0,
+            hMoving: 0,
+            placeholderShow: false,
+            placeholderMoving: false,
+            layout: MapLayoutTostate(_this.props.layout, _this.props.children)
+        };
+
+        _this.onDrag = _this.onDrag.bind(_this);
+        _this.onDragStart = _this.onDragStart.bind(_this);
+        _this.onDragEnd = _this.onDragEnd.bind(_this);
+        return _this;
     }
 
-    _createClass(CtmpFather, [{
+    _createClass(DraggerLayout, [{
+        key: 'onDragStart',
+        value: function onDragStart(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,
+                wMoving: w,
+                hMoving: h,
+                placeholderShow: true,
+                placeholderMoving: true,
+                layout: newlayout
+            });
+        }
+    }, {
+        key: 'onDrag',
+        value: function onDrag(layoutItem, key) {
+            var GridX = layoutItem.GridX,
+                GridY = layoutItem.GridY;
+
+            var moving = GridY - this.state.GridYMoving;
+
+            var newLayout = layoutCheck(this.state.layout, layoutItem, key, key /*用户移动方块的key */, moving);
+            var compactedLayout = compactLayout(newLayout);
+            for (var i = 0; i < compactedLayout.length; i++) {
+                if (key === compactedLayout[i].key) {
+                    /**
+                     * 特殊点：当我们移动元素的时候，元素在layout中的位置不断改变
+                     * 但是当isUserMove=true的时候，鼠标拖拽的元素不会随着位图变化而变化
+                     * 但是实际layout中的位置还是会改变
+                     * (isUserMove=true用于接触placeholder和元素的绑定)
+                     */
+                    compactedLayout[i].isUserMove = true;
+                    layoutItem.GridX = compactedLayout[i].GridX;
+                    layoutItem.GridY = compactedLayout[i].GridY;
+                    break;
+                }
+            }
+
+            this.setState({
+                GridXMoving: layoutItem.GridX,
+                GridYMoving: layoutItem.GridY,
+                layout: compactedLayout
+            });
+        }
+    }, {
+        key: 'onDragEnd',
+        value: function onDragEnd(key) {
+            var compactedLayout = compactLayout(this.state.layout);
+            this.setState({
+                placeholderShow: false,
+                layout: compactedLayout
+            });
+        }
+    }, {
+        key: 'placeholder',
+        value: function placeholder() {
+            if (!this.state.placeholderShow) return null;
+            var _props = this.props,
+                col = _props.col,
+                width = _props.width,
+                padding = _props.padding,
+                rowHeight = _props.rowHeight;
+            var _state = this.state,
+                GridXMoving = _state.GridXMoving,
+                GridYMoving = _state.GridYMoving,
+                wMoving = _state.wMoving,
+                hMoving = _state.hMoving,
+                placeholderMoving = _state.placeholderMoving;
+
+
+            return React.createElement(GridItem, {
+                col: col,
+                containerWidth: width,
+                containerPadding: padding,
+                rowHeight: rowHeight,
+                GridX: GridXMoving,
+                GridY: GridYMoving,
+                w: wMoving,
+                h: hMoving,
+                style: { background: '#a31', zIndex: -1, transition: ' all .15s' },
+                isUserMove: !placeholderMoving
+            });
+        }
+    }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            var that = this;
+            setTimeout(function () {
+                var layout = correctLayout(that.state.layout);
+                that.setState({
+                    layout: compactLayout(layout)
+                });
+            }, 1);
+        }
+    }, {
+        key: 'getGridItem',
+        value: function getGridItem(child, index) {
+            var layout = this.state.layout;
+            var _props2 = this.props,
+                col = _props2.col,
+                width = _props2.width,
+                padding = _props2.padding,
+                rowHeight = _props2.rowHeight;
+
+            var renderItem = layoutItemForkey(layout, child.key);
+
+            return React.createElement(
+                GridItem,
+                {
+                    col: col,
+                    containerWidth: width,
+                    containerPadding: padding,
+                    rowHeight: rowHeight,
+                    GridX: renderItem.GridX,
+                    GridY: renderItem.GridY,
+                    w: renderItem.w,
+                    h: renderItem.h,
+                    onDrag: this.onDrag,
+                    onDragStart: this.onDragStart,
+                    onDragEnd: this.onDragEnd,
+                    index: index,
+                    isUserMove: renderItem.isUserMove,
+                    style: { background: '#329' },
+                    UniqueKey: child.key
+                },
+                child
+            );
+        }
+    }, {
         key: 'render',
         value: function render() {
             var _this2 = this;
 
+            var _props3 = this.props,
+                layout = _props3.layout,
+                col = _props3.col,
+                width = _props3.width,
+                padding = _props3.padding,
+                rowHeight = _props3.rowHeight;
+
+
             return React.createElement(
                 'div',
                 {
-                    className: 'shitWrap',
-                    style: { display: 'flex', left: 100, height: 300, width: 300, border: '1px solid black', position: 'absolute' },
-                    ref: function ref(node) {
-                        return _this2.node = node;
-                    }
+                    className: 'DraggerLayout',
+                    style: { position: 'absolute', left: 100, width: this.props.width, height: 1000, border: '1px solid black' }
                 },
-                React.createElement(
-                    Dragger,
-                    {
-                        bounds: 'parent',
-                        style: { height: 50, width: 50, padding: 10, margin: 10, border: '1px solid black' },
-                        grid: [30, 30]
-                    },
-                    React.createElement(
-                        'div',
-                        null,
-                        React.createElement(
-                            'p',
-                            null,
-                            'asdasdad'
-                        ),
-                        React.createElement(
-                            'p',
-                            null,
-                            'asdasdad'
-                        )
-                    )
-                ),
-                React.createElement(
-                    Dragger,
-                    {
-                        style: { height: 50, width: 50, padding: 10, margin: 10, border: '1px solid black' },
-                        hasDraggerHandle: true
-                    },
-                    React.createElement(
-                        'div',
-                        null,
-                        React.createElement(
-                            'p',
-                            { className: 'handle' },
-                            'asdasdad'
-                        )
-                    )
-                )
+                React.Children.map(this.props.children, function (child, index) {
+                    return _this2.getGridItem(child, index);
+                }),
+                this.placeholder()
             );
         }
     }]);
 
-    return CtmpFather;
+    return DraggerLayout;
 }(React.Component);
 
-var _default = CtmpFather;
-export default _default;
+DraggerLayout.PropTypes = {
+    /**外部属性 */
+    layout: PropTypes.array,
+    col: PropTypes.number,
+    width: PropTypes.number,
+    /**每个元素的最小高度 */
+    rowHeight: PropTypes.number,
+    padding: PropTypes.number
+};
+
+
+export var LayoutDemo = function LayoutDemo() {
+    var layout = [{
+        GridX: 0, GridY: 0, w: 3, h: 3
+    }, {
+        GridX: 0, GridY: 0, w: 3, h: 3
+    }, {
+        GridX: 0, GridY: 0, w: 3, h: 3
+    }, {
+        GridX: 0, GridY: 0, w: 3, h: 3
+    }, {
+        GridX: 3, GridY: 8, w: 3, h: 3
+    }, {
+        GridX: 3, GridY: 8, w: 3, h: 3
+    }, {
+        GridX: 3, GridY: 8, w: 3, h: 3
+    }, {
+        GridX: 3, GridY: 8, w: 3, h: 3
+    }];
+    return React.createElement(
+        DraggerLayout,
+        { layout: layout, width: 1000, col: 12 },
+        React.createElement(
+            'p',
+            { key: 'a' },
+            'a'
+        ),
+        React.createElement(
+            'p',
+            { key: 'b' },
+            'b'
+        ),
+        React.createElement(
+            'p',
+            { key: 'c' },
+            'c'
+        ),
+        React.createElement(
+            'p',
+            { key: 'd' },
+            'd'
+        ),
+        React.createElement(
+            'p',
+            { key: 'e' },
+            'e'
+        ),
+        React.createElement(
+            'p',
+            { key: 'f' },
+            'f'
+        ),
+        React.createElement(
+            'p',
+            { key: 'g' },
+            'g'
+        ),
+        React.createElement(
+            'p',
+            { key: 'h' },
+            'h'
+        )
+    );
+};
 ;
 
 var _temp = function () {
@@ -85,9 +468,29 @@ var _temp = function () {
         return;
     }
 
-    __REACT_HOT_LOADER__.register(CtmpFather, 'CtmpFather', 'app/src/App.js');
+    __REACT_HOT_LOADER__.register(correctLayout, 'correctLayout', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(layoutItemForkey, 'layoutItemForkey', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(MapLayoutTostate, 'MapLayoutTostate', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(syncLayout, 'syncLayout', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(collision, 'collision', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(sortLayout, 'sortLayout', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(getFirstCollison, 'getFirstCollison', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(compactItem, 'compactItem', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(compactLayout, 'compactLayout', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(layoutCheck, 'layoutCheck', 'app/src/App.js');
+
+    __REACT_HOT_LOADER__.register(DraggerLayout, 'DraggerLayout', 'app/src/App.js');
 
-    __REACT_HOT_LOADER__.register(_default, 'default', 'app/src/App.js');
+    __REACT_HOT_LOADER__.register(LayoutDemo, 'LayoutDemo', 'app/src/App.js');
 }();
 
 ;

build/Dragger.js

@@ -25,10 +25,19 @@ var Dragger = function (_React$Component) {
         var _this = _possibleConstructorReturn(this, (_ref = Dragger.__proto__ || _Object$getPrototypeOf(Dragger)).call.apply(_ref, [this].concat(props)));
 
         _this.state = {
+            /** x轴位移，单位是px */
             x: null,
+
+            /** y轴位移，单位是px */
             y: null,
+
+            /**鼠标点击元素的原始位置，单位是px */
             originX: 0,
             originY: 0,
+
+            isUserMove: true,
+
+            /**已经移动的位移，单位是px */
             lastX: 0,
             lastY: 0
         };
@@ -37,11 +46,14 @@ var Dragger = function (_React$Component) {
         _this.onDragEnd = _this.onDragEnd.bind(_this);
         return _this;
     }
+    /** props end */
+
+    /**
+     * 初始变量设置
+     */
+
 
     _createClass(Dragger, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {}
-    }, {
         key: 'move',
         value: function move(event) {
             var _state = this.state,
@@ -63,7 +75,7 @@ var Dragger = function (_React$Component) {
                 var NewBounds = typeof bounds !== 'string' ? bounds : parseBounds(bounds);
 
                 /**
-                 * 移动范围设定，永远移动 n 的倍数
+                 * 网格式移动范围设定，永远移动 n 的倍数
                  * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
                  */
                 var grid = this.props.grid;
@@ -101,6 +113,9 @@ var Dragger = function (_React$Component) {
             deltaX = this.props.allowX ? deltaX : 0;
             deltaY = this.props.allowY ? deltaY : 0;
 
+            /**移动时回调，用于外部控制 */
+            if (this.props.onMove) this.props.onMove(event, deltaX, deltaY);
+
             this.setState({
                 x: deltaX,
                 y: deltaY
@@ -116,11 +131,17 @@ var Dragger = function (_React$Component) {
                 if (event.target.className !== 'handle') return;
             }
 
+            /**
+             * 把监听事件的回掉函数，绑定在document上
+             * 当设置边界的时候，用户鼠标会离开元素的范围
+             * 绑定在document上可以使得其依旧能够监听
+             * 如果绑定在元素上，则鼠标离开元素，就不会再被监听了
+             */
             doc.addEventListener('mousemove', this.move);
             doc.addEventListener('mouseup', this.onDragEnd);
 
             if (this.props.bounds === 'parent' && (
-            //为了让 这段代码不会重复执行
+            /**为了让 这段代码不会重复执行 */
             typeof this.parent === 'undefined' || this.parent === null)) {
                 /**
                  * 在这里我们将父节点缓存下来，保证当用户鼠标离开拖拽区域时，我们仍然能获取到父节点
@@ -135,6 +156,8 @@ var Dragger = function (_React$Component) {
                 this.self = event.currentTarget;
             }
 
+            this.props.onDragStart(this.state.x, this.state.y);
+
             this.setState({
                 originX: event.clientX,
                 originY: event.clientY,
@@ -151,6 +174,43 @@ var Dragger = function (_React$Component) {
             this.self = null;
             doc.removeEventListener('mousemove', this.move);
             doc.removeEventListener('mouseup', this.onDragEnd);
+
+            this.props.onDragEnd(event);
+        }
+    }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            /** 
+             * 这个函数只会调用一次 
+             * 这个只是一个临时的解决方案，因为这样会使得元素进行两次刷新
+            */
+            if (typeof this.props.x === 'number' && typeof this.props.y === 'number') {
+                this.setState({
+                    x: this.props.x,
+                    y: this.props.y
+                });
+            }
+        }
+    }, {
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            /**
+             * 外部props 改变的时候更新元素的内部位置
+             * 这个api设计其实很不好
+             * 以后可能会修改掉
+             */
+            var isUserMove = nextProps.isUserMove;
+
+            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
+                    });
+                }
+            }
         }
     }, {
         key: 'render',
@@ -164,8 +224,14 @@ var Dragger = function (_React$Component) {
                 className = _props.className,
                 others = _props.others;
 
-            /**主要是为了让用户定义自己的className去修改css */
 
+            if (!this.props.isUserMove) {
+                /**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
+                x = this.props.x;
+                y = this.props.y;
+            }
+
+            /**主要是为了让用户定义自己的className去修改css */
             var fixedClassName = typeof className === 'undefined' ? '' : className + ' ';
             return React.createElement(
                 'div',
@@ -183,21 +249,62 @@ var Dragger = function (_React$Component) {
 }(React.Component);
 
 Dragger.propTypes = {
+    /**
+     * 给予元素一个x,y的初始位置，单位是px
+     */
+    x: PropTypes.number,
+    y: PropTypes.number,
+
+    /**
+     * 拖动范围限制
+     * 如果不规定范围，那么子元素就可以随意拖动不受限制
+     * 1.可以提供自定义的范围限制
+     * 2.也可以提供父类为边框的范围限制(string === parent)
+     */
     bounds: PropTypes.oneOfType([PropTypes.shape({
         left: PropTypes.number,
         right: PropTypes.number,
         top: PropTypes.number,
         bottom: PropTypes.number
     }), PropTypes.string]),
+    /**
+     * 以网格的方式移动，每次移动并不是平滑的移动
+     * [20,30]，鼠标x轴方向移动了20 px ，y方向移动了30 px，整个子元素才会移动
+     */
     grid: PropTypes.arrayOf(PropTypes.number),
+
+    /**只允许移动x轴 */
     allowX: PropTypes.bool,
+
+    /**只允许移动y轴 */
     allowY: PropTypes.bool,
-    hasDraggerHandle: PropTypes.bool
-};
+
+    /**
+     * 内部的移动拖拽把手
+     * 拖拽把手className一定要设置成handle并且这个属性设置成true
+     * <Dragger hasDraggerHandle={true}>
+     *      <div className={handle} >点击我拖动</div>
+     * </Dragger>
+     */
+    hasDraggerHandle: PropTypes.bool,
+
+    /**
+     * 是否由用户移动
+     * 可能是通过外部props改变
+     */
+    isUserMove: PropTypes.bool,
+
+    /**
+     * 生命周期回调
+     */
+    onDragStart: PropTypes.func,
+    onMove: PropTypes.func,
+    onDragEnd: PropTypes.func };
 Dragger.defaultProps = {
     allowX: true,
     allowY: true,
-    hasDraggerHandle: false
+    hasDraggerHandle: false,
+    isUserMove: true
 };
 var _default = Dragger;
 export default _default;

build/index.html

@@ -9,7 +9,7 @@
 
 <body>
     <div id="root"></div>
-    <script src="bundle.js"></script>
+    <script src="react-dragger-layout.js"></script>
 </body>
 
 </html>

build/index.js

@@ -2,12 +2,12 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import { LayoutDemo } from './App';
 
 ReactDOM.render(React.createElement(
     'div',
     null,
-    React.createElement(App, null)
+    React.createElement(LayoutDemo, null)
 ), document.getElementById('root'));
 ;
 

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "temp": "NODE_ENV=production webpack -p --config webpack.pro.config.js ",
     "test": "webpack-dev-server --devtool eval-source-map --progress --host 127.0.0.1 --colors --hot --content-base ./build --history-api-fallback",
     "build": "./node_modules/.bin/babel --out-dir ./build ./app/src/",
     "dev": "webpack-dev-server --devtool eval-source-map --progress --host 127.0.0.1 --colors --content-base ./build --history-api-fallback"

webpack.pro.config.js

@@ -5,34 +5,18 @@ module.exports = {
     entry: [
         // 'react-hot-loader/patch',
         // 'webpack/hot/only-dev-server',
-        './app/src/App.js'
+        './app/src/index.js'
     ],
     output: {
         path: resolve(__dirname, 'build'),//打包后的文件存放的地方
         filename: "react-dragger-layout.js",//打包后输出文件的文件名
-        publicPath: "/",
-        libraryTarget: 'umd'
+        publicPath: "/"
     },
     devServer: {
         contentBase: resolve(__dirname, 'build'),
         hot: true,
         publicPath: '/',
     },
-    externals: {
-        'react': {
-          'commonjs': 'react',
-          'commonjs2': 'react',
-          'amd': 'react',
-          // React dep should be available as window.React, not window.react
-          'root': 'React'
-        },
-        'react-dom': {
-          'commonjs': 'react-dom',
-          'commonjs2': 'react-dom',
-          'amd': 'react-dom',
-          'root': 'ReactDOM'
-        }
-      },
     module: {
         rules: [
             {