- 新增拖拽把手

- 自由选择拖拽和resize

dist/HandleLayout/index.js

@@ -0,0 +1,72 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+import * as React from 'react';
+import { Dragact } from '../lib/dragact';
+import './index.css';
+var Words = [
+    { content: 'You can do anything, but not everything.', img: 'http://pic.sc.chinaz.com/files/pic/pic9/201303/xpic10472.jpg' },
+    { content: 'Those who dare to fail miserably can achieve greatly.', img: 'https://img00.deviantart.net/1163/i/2013/059/d/7/irish_views_by_ssquared_photography-d5wjnsk.jpg' },
+    { content: 'You miss 100 percent of the shots you never take.', img: 'http://www.landsendhotel.co.uk/uploads/gallery/gallery/coastal_scenery_seascapes_6.jpg' },
+    { content: 'Those who believe in telekinetics, raise my hand.', img: 'https://tctechcrunch2011.files.wordpress.com/2017/10/26099344353_18cd6fabb8_k.jpg?w=738' },
+    { content: 'I’d rather live with a good question than a bad answer.', img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVa26cLzh6PYUwY4LMpwbHyDHFmWi_w2JuqDzeOdm1IIEbBZO0Vg' }
+];
+var Card = function (props) {
+    var item = props.item;
+    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 HandleLayout = /** @class */ (function (_super) {
+    __extends(HandleLayout, _super);
+    function HandleLayout() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            layout: []
+        };
+        return _this;
+    }
+    HandleLayout.prototype.componentDidMount = function () {
+        this.setState({
+            layout: this.dragactNode.getLayout()
+        });
+    };
+    HandleLayout.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' } }, "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 } }))))));
+    };
+    return HandleLayout;
+}(React.Component));
+export { HandleLayout };

dist/SortedTable/index.js

@@ -19,6 +19,6 @@ export var SortedTable = function () {
         React.createElement("div", null,
             React.createElement("h1", { style: { textAlign: 'center' } }, "Sorted Table Demo"),
             React.createElement(Dragact, { width: 800, col: 1, rowHeight: 60, margin: [2, 2], className: 'normal-layout' }, Words.map(function (el, index) {
-                return React.createElement(Cell, { item: el, key: index, "data-set": { GridX: 0, GridY: 0, w: 1, h: 1 } });
+                return React.createElement(Cell, { item: el, key: index, "data-set": { GridX: 0, GridY: 0, w: 1, h: 1, canResize: false } });
             })))));
 };

dist/index.js

@@ -14,19 +14,21 @@ import { LayoutDemo } from './NormalLayout/index';
 import { SortedTable } from "./SortedTable/index";
 import { SortedTableWithStatic } from "./StaticHeader/index";
 import { LayoutRestore } from "./LayoutRestore/index";
+import { HandleLayout } from "./HandleLayout/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)
+    LayoutRestore: React.createElement(LayoutRestore, null),
+    HandleLayout: React.createElement(HandleLayout, 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(LayoutDemo, null)
+            demo: React.createElement(SortedTable, null)
         };
         _this.handleLayoutChange = function (demoName) {
             _this.setState({
@@ -43,7 +45,8 @@ var DemoDispatcher = /** @class */ (function (_super) {
                 React.createElement("button", { onClick: function () { return _this.handleLayoutChange('normalLayout'); } }, "normalLayout"),
                 React.createElement("button", { onClick: function () { return _this.handleLayoutChange('SortedTable'); } }, "SortedTable"),
                 React.createElement("button", { onClick: function () { return _this.handleLayoutChange('StaticHeader'); } }, "StaticHeader"),
-                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('LayoutRestore'); } }, "LayoutRestore")),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('LayoutRestore'); } }, "LayoutRestore"),
+                React.createElement("button", { onClick: function () { return _this.handleLayoutChange('HandleLayout'); } }, "HandleLayout")),
             this.state.demo));
     };
     return DemoDispatcher;

dist/lib/GridItem.js

@@ -133,10 +133,10 @@ var GridItem = /** @class */ (function (_super) {
             this.props.onDragEnd({ GridX: GridX, GridY: GridY, w: w, h: h, UniqueKey: UniqueKey + '', event: event });
     };
     GridItem.prototype.render = function () {
-        var _a = this.props, w = _a.w, h = _a.h, style = _a.style, bounds = _a.bounds, GridX = _a.GridX, GridY = _a.GridY;
+        var _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;
-        return (React.createElement(Dragger, { style: __assign({}, style, { width: wPx, height: hPx, position: 'absolute', transition: this.props.isUserMove ? '' : 'all .2s', zIndex: this.props.isUserMove ? (this.props.dragType === 'drag' ? 10 : 2) : 2 }), onDragStart: this.onDragStart, onMove: this.onDrag, onDragEnd: this.onDragEnd, onResizeStart: this.onResizeStart, onResizing: this.onResizing, onResizeEnd: this.onResizeEnd, x: x, y: y, w: wPx, h: hPx, isUserMove: this.props.isUserMove, bounds: bounds },
+        return (React.createElement(Dragger, { style: __assign({}, style, { width: wPx, height: hPx, position: 'absolute', transition: this.props.isUserMove ? '' : 'all .2s', zIndex: this.props.isUserMove ? (this.props.dragType === 'drag' ? 10 : 2) : 2 }), onDragStart: this.onDragStart, onMove: this.onDrag, onDragEnd: this.onDragEnd, onResizeStart: this.onResizeStart, onResizing: this.onResizing, onResizeEnd: this.onResizeEnd, x: x, y: y, w: wPx, h: hPx, isUserMove: this.props.isUserMove, bounds: bounds, handle: handle, canDrag: canDrag, canResize: canResize },
             React.createElement("div", { style: { height: '100%', width: "100%" } }, React.Children.map(this.props.children, function (child) { return child; }))));
     };
     GridItem.defaultProps = {

dist/lib/dragact.js

@@ -146,7 +146,7 @@ var Dragact = /** @class */ (function (_super) {
         var _b = this.state, GridXMoving = _b.GridXMoving, GridYMoving = _b.GridYMoving, wMoving = _b.wMoving, hMoving = _b.hMoving, placeholderMoving = _b.placeholderMoving, dragType = _b.dragType;
         if (!padding)
             padding = 0;
-        return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: GridXMoving, GridY: GridYMoving, w: wMoving, h: hMoving, style: { background: 'rgba(15,15,15,0.3)', zIndex: dragType === 'drag' ? 1 : 10, transition: ' all .15s' }, isUserMove: !placeholderMoving, dragType: dragType }));
+        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.componentDidMount = function () {
         var _this = this;
@@ -166,7 +166,7 @@ var Dragact = /** @class */ (function (_super) {
         if (renderItem) {
             if (!padding)
                 padding = 0;
-            return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: renderItem.GridX, GridY: renderItem.GridY, w: renderItem.w, h: renderItem.h, onDrag: this.onDrag, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, isUserMove: renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false, UniqueKey: child.key, static: renderItem.static, onResizing: this.onResizing, onResizeStart: this.onResizeStart, onResizeEnd: this.onResizeEnd, dragType: dragType }, child));
+            return (React.createElement(GridItem, { margin: margin, col: col, containerWidth: width, containerPadding: [padding, padding], rowHeight: rowHeight, GridX: renderItem.GridX, GridY: renderItem.GridY, w: renderItem.w, h: renderItem.h, onDrag: this.onDrag, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, isUserMove: renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false, UniqueKey: child.key, static: renderItem.static, onResizing: this.onResizing, onResizeStart: this.onResizeStart, onResizeEnd: this.onResizeEnd, dragType: dragType, handle: renderItem.handle, canDrag: renderItem.canDrag, canResize: renderItem.canResize }, child));
         }
     };
     Dragact.prototype.render = function () {

dist/lib/dragger/index.js

@@ -42,6 +42,145 @@ var Dragger = /** @class */ (function (_super) {
             lastW: 0,
             lastH: 0
         };
+        _this.move = function (event) {
+            var _a = _this.state, lastX = _a.lastX, lastY = _a.lastY;
+            /*  event.client - this.state.origin 表示的是移动的距离,
+            *   elX表示的是原来已经有的位移
+            */
+            var deltaX, deltaY;
+            if (event.type.indexOf('mouse') >= 0) {
+                deltaX = event.clientX - _this.state.originX + lastX;
+                deltaY = event.clientY - _this.state.originY + lastY;
+            }
+            else {
+                deltaX = event.touches[0].clientX - _this.state.originX + lastX;
+                deltaY = event.touches[0].clientY - _this.state.originY + lastY;
+            }
+            var bounds = _this.props.bounds;
+            if (bounds) {
+                /**
+                * 如果用户指定一个边界，那么在这里处理
+                */
+                var NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
+                /**
+                 * 网格式移动范围设定，永远移动 n 的倍数
+                 * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
+                 */
+                var grid = _this.props.grid;
+                if (Array.isArray(grid) && grid.length === 2) {
+                    deltaX = Math.round(deltaX / grid[0]) * grid[0];
+                    deltaY = Math.round(deltaY / grid[1]) * grid[1];
+                }
+                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);
+            _this.setState({
+                x: deltaX,
+                y: deltaY
+            });
+        };
+        _this.onDragStart = function (event) {
+            /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
+            doc.body.style.userSelect = 'none';
+            if (_this.props.handle) {
+                if (event.target.id !== 'dragact-handle')
+                    return;
+            }
+            /**
+             * 把监听事件的回掉函数，绑定在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.currentTarget.offsetParent; //todo
+                /**
+                 * 我们自己
+                 * ourself
+                 */
+                _this.self = event.currentTarget;
+            }
+            _this.props.onDragStart && _this.props.onDragStart(_this.state.x, _this.state.y);
+            var originX, originY;
+            if (event.type.indexOf('mouse') >= 0) {
+                originX = event.clientX;
+                originY = event.clientY;
+            }
+            else {
+                originX = event.touches[0].clientX;
+                originY = event.touches[0].clientY;
+            }
+            _this.setState({
+                originX: originX,
+                originY: originY,
+                lastX: _this.state.x,
+                lastY: _this.state.y,
+                zIndex: 10
+            });
+        };
+        _this.onDragEnd = function (event) {
+            /** 取消用户选择限制，用户可以重新选择 */
+            doc.body.style.userSelect = '';
+            _this.parent = null;
+            _this.self = null;
+            if (event.type.indexOf('mouse') >= 0) {
+                doc.removeEventListener('mousemove', _this.move);
+                doc.removeEventListener('mouseup', _this.onDragEnd);
+            }
+            else {
+                doc.removeEventListener('touchmove', _this.move);
+                doc.removeEventListener('touchend', _this.onDragEnd);
+            }
+            _this.setState({
+                zIndex: 1
+            });
+            _this.props.onDragEnd && _this.props.onDragEnd(event, _this.state.x, _this.state.y);
+        };
         _this.onResizeStart = function (event) {
             /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
             doc.body.style.userSelect = 'none';
@@ -86,150 +225,33 @@ var Dragger = /** @class */ (function (_super) {
             doc.removeEventListener('mouseup', _this.onResizeEnd);
             _this.props.onResizeEnd && _this.props.onResizeEnd(event, _this.state.w, _this.state.h);
         };
-        _this.move = _this.move.bind(_this);
-        _this.onDragEnd = _this.onDragEnd.bind(_this);
+        _this.mixin = function () {
+            var dragMix = {};
+            if (_this.props.canDrag === void 666 || _this.props.canDrag === true) {
+                dragMix = {
+                    onMouseDown: _this.onDragStart,
+                    onTouchStart: _this.onDragStart,
+                    onTouchEnd: _this.onDragEnd,
+                    onMouseUp: _this.onDragEnd
+                };
+            }
+            var resizeMix = {};
+            if (_this.props.canResize === void 666 || _this.props.canDrag === true) {
+                resizeMix = {
+                    onMouseDown: _this.onResizeStart,
+                    onMouseUp: _this.onResizeEnd
+                };
+            }
+            return {
+                dragMix: dragMix, resizeMix: resizeMix
+            };
+        };
+        // this.move = this.move.bind(this)
+        // this.onDragEnd = this.onDragEnd.bind(this)
         _this.parent = null;
         _this.self = null;
         return _this;
     }
-    Dragger.prototype.move = function (event) {
-        var _a = this.state, lastX = _a.lastX, lastY = _a.lastY;
-        /*  event.client - this.state.origin 表示的是移动的距离,
-        *   elX表示的是原来已经有的位移
-        */
-        var deltaX, deltaY;
-        if (event.type.indexOf('mouse') >= 0) {
-            deltaX = event.clientX - this.state.originX + lastX;
-            deltaY = event.clientY - this.state.originY + lastY;
-        }
-        else {
-            deltaX = event.touches[0].clientX - this.state.originX + lastX;
-            deltaY = event.touches[0].clientY - this.state.originY + lastY;
-        }
-        var bounds = this.props.bounds;
-        if (bounds) {
-            /**
-            * 如果用户指定一个边界，那么在这里处理
-            */
-            var NewBounds = typeof bounds !== 'string' ? parseBounds(bounds) : bounds;
-            /**
-             * 网格式移动范围设定，永远移动 n 的倍数
-             * 注意:设定移动范围的时候，一定要在判断bounds之前，否则会造成bounds不对齐
-             */
-            var grid = this.props.grid;
-            if (Array.isArray(grid) && grid.length === 2) {
-                deltaX = Math.round(deltaX / grid[0]) * grid[0];
-                deltaY = Math.round(deltaY / grid[1]) * grid[1];
-            }
-            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);
-        this.setState({
-            x: deltaX,
-            y: deltaY
-        });
-    };
-    Dragger.prototype.onDragStart = function (event) {
-        /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
-        doc.body.style.userSelect = 'none';
-        // if (this.props.hasDraggerHandle) {
-        //     if (event.target.className !== 'handle') return
-        // }
-        /**
-         * 把监听事件的回掉函数，绑定在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.currentTarget.offsetParent; //todo
-            /**
-             * 我们自己
-             * ourself
-             */
-            this.self = event.currentTarget;
-        }
-        this.props.onDragStart && this.props.onDragStart(this.state.x, this.state.y);
-        var originX, originY;
-        if (event.type.indexOf('mouse') >= 0) {
-            originX = event.clientX;
-            originY = event.clientY;
-        }
-        else {
-            originX = event.touches[0].clientX;
-            originY = event.touches[0].clientY;
-        }
-        this.setState({
-            originX: originX,
-            originY: originY,
-            lastX: this.state.x,
-            lastY: this.state.y,
-            zIndex: 10
-        });
-    };
-    Dragger.prototype.onDragEnd = function (event) {
-        /** 取消用户选择限制，用户可以重新选择 */
-        doc.body.style.userSelect = '';
-        this.parent = null;
-        this.self = null;
-        if (event.type.indexOf('mouse') >= 0) {
-            doc.removeEventListener('mousemove', this.move);
-            doc.removeEventListener('mouseup', this.onDragEnd);
-        }
-        else {
-            doc.removeEventListener('touchmove', this.move);
-            doc.removeEventListener('touchend', this.onDragEnd);
-        }
-        this.setState({
-            zIndex: 1
-        });
-        this.props.onDragEnd && this.props.onDragEnd(event, this.state.x, this.state.y);
-    };
     Dragger.prototype.componentDidMount = function () {
         /**
          * 这个函数只会调用一次
@@ -266,7 +288,7 @@ var Dragger = /** @class */ (function (_super) {
     };
     Dragger.prototype.render = function () {
         var _a = this.state, x = _a.x, y = _a.y, w = _a.w, h = _a.h;
-        var _b = this.props, style = _b.style, className = _b.className;
+        var _b = this.props, style = _b.style, className = _b.className, canResize = _b.canResize;
         if (!this.props.isUserMove) {
             /**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
             x = this.props.x ? this.props.x : 0;
@@ -274,26 +296,25 @@ var Dragger = /** @class */ (function (_super) {
             if (style) {
                 w = style.width ? style.width : w;
                 h = style.height ? style.height : h;
-                console.log(style);
             }
         }
         if (style) {
+            //使得初始化的时候，不会有从0-1缩放动画
             w = w === 0 ? style.width : w;
             h = h === 0 ? style.height : h;
         }
+        var _c = this.mixin(), dragMix = _c.dragMix, resizeMix = _c.resizeMix;
         /**主要是为了让用户定义自己的className去修改css */
         var fixedClassName = typeof className === 'undefined' ? '' : className + ' ';
-        return (React.createElement("div", { className: fixedClassName + "WrapDragger", style: __assign({}, style, { touchAction: 'none!important', transform: "translate(" + x + "px," + y + "px)", width: w, height: h }), onMouseDown: this.onDragStart.bind(this), onTouchStart: this.onDragStart.bind(this), onTouchEnd: this.onDragEnd.bind(this), onMouseUp: this.onDragEnd.bind(this) },
+        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),
             React.Children.only(this.props.children),
-            React.createElement("span", { onMouseDown: this.onResizeStart, 
-                // onTouchStart={this.onDragStart.bind(this)}
-                // onTouchEnd={this.onDragEnd.bind(this)}
-                onMouseUp: this.onResizeEnd, style: {
-                    position: 'absolute',
-                    width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
-                    borderRight: '2px solid rgba(15,15,15,0.2)',
-                    borderBottom: '2px solid rgba(15,15,15,0.2)'
-                } })));
+            canResize !== false ?
+                React.createElement("span", __assign({}, resizeMix, { style: {
+                        position: 'absolute',
+                        width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
+                        borderRight: '2px solid rgba(15,15,15,0.2)',
+                        borderBottom: '2px solid rgba(15,15,15,0.2)'
+                    } })) : null));
     };
     /**
      * 初始变量设置

example/changelog.md

@@ -1,6 +1,7 @@
 v0.1.5
 - 修正zIndex的错误
 - 新增拖拽把手
+- 自由选择拖拽和resize
 
 v0.1.3
 

src/HandleLayout/index.tsx

@@ -16,7 +16,7 @@ const Card = (props: any) => {
     const item: any = props.item;
     const dataSet: any = props['data-set'];
     return (
-        <div className='layout-Item'>
+        <div className='layout-Item' >
             <img src={item.img} style={{ width: '100%', height: '60%' }} draggable={false} alt='card'></img>
             <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{dataSet.handle ? <div className='card-handle' id="dragact-handle">点我拖动</div> : item.content}</div>
         </div>
@@ -25,6 +25,7 @@ const Card = (props: any) => {
 
 
 export class HandleLayout extends React.Component<{}, {}> {
+    layoutWrap: HTMLDivElement | null
     dragactNode: Dragact;
     state = {
         layout: []
@@ -35,7 +36,6 @@ export class HandleLayout extends React.Component<{}, {}> {
             layout: this.dragactNode.getLayout()
         })
     }
-
     render() {
         const margin: [number, number] = [5, 5];
         const dragactInit = {
@@ -46,15 +46,17 @@ export class HandleLayout extends React.Component<{}, {}> {
             className: 'normal-layout'
         }
         return (
-            <div style={{ display: 'flex', justifyContent: 'center' }}>
-                <div>
-                    <h1 style={{ textAlign: 'center' }}>Handle Layout Demo</h1>
-                    <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
-                        <Card item={Words[0]} key={0} data-set={{ GridX: 0, GridY: 0, w: 3, h: 3 }} />
-                        <Card item={Words[1]} key={1} data-set={{ GridX: 3, GridY: 0, w: 3, h: 3 }} />
-                        <Card item={Words[2]} key={2} data-set={{ GridX: 6, GridY: 0, w: 3, h: 3 }} />
-                        <Card item={Words[3]} key={3} data-set={{ GridX: 9, GridY: 0, w: 3, h: 3, handle: true }} />
-                    </Dragact>
+            <div>
+                <div style={{ display: 'flex', justifyContent: 'center' }} >
+                    <div>
+                        <h1 style={{ textAlign: 'center' }}>Handle Layout Demo</h1>
+                        <Dragact {...dragactInit} ref={node => node ? this.dragactNode = node : null} >
+                            <Card item={Words[0]} key={0} data-set={{ GridX: 0, GridY: 0, w: 3, h: 3 }} />
+                            <Card item={Words[1]} key={1} data-set={{ GridX: 3, GridY: 0, w: 3, h: 3 }} />
+                            <Card item={Words[2]} key={2} data-set={{ GridX: 6, GridY: 0, w: 3, h: 3 }} />
+                            <Card item={Words[3]} key={3} data-set={{ GridX: 9, GridY: 0, w: 3, h: 3, handle: true }} />
+                        </Dragact>
+                    </div>
                 </div>
             </div>
         )

src/SortedTable/index.tsx

@@ -31,7 +31,7 @@ export const SortedTable = () => {
                 <h1 style={{ textAlign: 'center' }}>Sorted Table Demo</h1>
                 <Dragact width={800} col={1} rowHeight={60} margin={[2, 2]} className='normal-layout'>
                     {Words.map((el, index) => {
-                        return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: 0, w: 1, h: 1 }} />
+                        return <Cell item={el} key={index} data-set={{ GridX: 0, GridY: 0, w: 1, h: 1, canResize: false }} />
                     })}
                 </Dragact>
             </div>

src/index.tsx

@@ -19,7 +19,7 @@ const DemoMap: any = {
 class DemoDispatcher extends React.Component<{}, {}> {
 
     state = {
-        demo: <LayoutDemo />
+        demo: <SortedTable />
     }
 
     handleLayoutChange = (demoName: string) => {

src/lib/dragact.tsx

@@ -19,6 +19,8 @@ export interface DragactLayoutItem {
     isUserMove?: Boolean
     key?: number | string
     handle?: Boolean
+    canDrag?: Boolean
+    canResize?: Boolean
 }
 
 export interface DragactProps {
@@ -253,6 +255,8 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 style={{ background: 'rgba(15,15,15,0.3)', zIndex: dragType === 'drag' ? 1 : 10, transition: ' all .15s' }}
                 isUserMove={!placeholderMoving}
                 dragType={dragType}
+                canDrag={false}
+                canResize={false}
             />
         )
     }
@@ -295,6 +299,8 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     onResizeEnd={this.onResizeEnd}
                     dragType={dragType}
                     handle={renderItem.handle}
+                    canDrag={renderItem.canDrag}
+                    canResize={renderItem.canResize}
                 >
                     {child}
                 </GridItem >

src/lib/dragger/index.tsx

@@ -59,7 +59,11 @@ interface DraggerProps {
     w?: number,
     h?: number,
 
-    handle?: Boolean
+    handle?: Boolean;
+
+    canDrag?: Boolean;
+
+    canResize?: Boolean;
 }
 
 export class Dragger extends React.Component<DraggerProps, {}> {
@@ -359,9 +363,33 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         }
     }
 
+    mixin = () => {
+        var dragMix = {};
+        if (this.props.canDrag === void 666 || this.props.canDrag === true) {
+            dragMix = {
+                onMouseDown: this.onDragStart,
+                onTouchStart: this.onDragStart,
+                onTouchEnd: this.onDragEnd,
+                onMouseUp: this.onDragEnd
+            }
+        }
+
+        var resizeMix = {}
+        if (this.props.canResize === void 666 || this.props.canDrag === true) {
+            resizeMix = {
+                onMouseDown: this.onResizeStart,
+                onMouseUp: this.onResizeEnd
+            }
+        }
+
+        return {
+            dragMix, resizeMix
+        };
+    }
+
     render() {
         var { x, y, w, h } = this.state
-        var { style, className } = this.props
+        var { style, className, canResize } = this.props
         if (!this.props.isUserMove) {
             /**当外部设置其props的x,y初始属性的时候，我们在这里设置元素的初始位移 */
             x = this.props.x ? this.props.x : 0;
@@ -376,7 +404,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             w = w === 0 ? style.width : w;
             h = h === 0 ? style.height : h;
         }
-
+        const { dragMix, resizeMix } = this.mixin();
 
         /**主要是为了让用户定义自己的className去修改css */
         const fixedClassName = typeof className === 'undefined' ? '' : className + ' '
@@ -389,24 +417,19 @@ export class Dragger extends React.Component<DraggerProps, {}> {
                     width: w,
                     height: h,
                 }}
-                onMouseDown={this.onDragStart}
-                onTouchStart={this.onDragStart}
-                onTouchEnd={this.onDragEnd}
-                onMouseUp={this.onDragEnd}
+                {...dragMix}
             >
                 {React.Children.only(this.props.children)}
-                <span
-                    onMouseDown={this.onResizeStart}
-                    // onTouchStart={this.onDragStart.bind(this)}
-                    // onTouchEnd={this.onDragEnd.bind(this)}
-                    onMouseUp={this.onResizeEnd}
-                    style={{
-                        position: 'absolute',
-                        width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
-                        borderRight: '2px solid rgba(15,15,15,0.2)',
-                        borderBottom: '2px solid rgba(15,15,15,0.2)'
-                    }}
-                />
+                {canResize !== false ?
+                    <span
+                        {...resizeMix}
+                        style={{
+                            position: 'absolute',
+                            width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',
+                            borderRight: '2px solid rgba(15,15,15,0.2)',
+                            borderBottom: '2px solid rgba(15,15,15,0.2)'
+                        }}
+                    /> : null}
             </div>
         )
     }

src/lib/gridItem.tsx

@@ -42,6 +42,10 @@ export interface GridItemProps {
     dragType: 'drag' | 'resize'
 
     handle?: Boolean
+
+    canDrag?: Boolean
+
+    canResize?: Boolean
 }
 
 export interface GridItemEvent {
@@ -197,10 +201,9 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
 
         this.props.onResizeEnd && this.props.onResizeEnd({ GridX, GridY, w, h, UniqueKey: UniqueKey + '', event })
     }
-
     render() {
 
-        const { w, h, style, bounds, GridX, GridY, handle } = this.props
+        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);
         return (
@@ -224,6 +227,8 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
                 isUserMove={this.props.isUserMove}
                 bounds={bounds}
                 handle={handle}
+                canDrag={canDrag}
+                canResize={canResize}
             >
                 <div style={{ height: '100%', width: "100%" }}>
                     {React.Children.map(this.props.children, (child) => child)}