修复zIndex

example/changelog.md

@@ -1,3 +1,7 @@
+v0.1.5
+- 修正zIndex的错误
+
+
 v0.1.3
 
 - 新增组件api:```getLayout```，用于获取当前的layout.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dragact",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
   "main": "index.js",
   "scripts": {

src/lib/dragact.tsx

@@ -251,6 +251,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 h={hMoving}
                 style={{ background: 'rgba(15,15,15,0.3)', zIndex: dragType === 'drag' ? 1 : 10, transition: ' all .15s' }}
                 isUserMove={!placeholderMoving}
+                dragType={dragType}
             />
         )
     }
@@ -266,7 +267,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
     }
 
     getGridItem(child: any, index: number) {
-        const { layout } = this.state
+        const { layout, dragType } = this.state
         var { col, width, padding, rowHeight, margin } = this.props;
         const renderItem = layoutItemForkey(layout, child.key);//TODO:可以优化速度，这一步不是必须;
         if (renderItem) {
@@ -287,11 +288,11 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     onDragEnd={this.onDragEnd}
                     isUserMove={renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false}
                     UniqueKey={child.key}
-                    style={{ zIndex: 2 }}
                     static={renderItem.static}
                     onResizing={this.onResizing}
                     onResizeStart={this.onResizeStart}
                     onResizeEnd={this.onResizeEnd}
+                    dragType={dragType}
                 >
                     {child}
                 </GridItem >

src/lib/dragger/index.tsx

@@ -282,7 +282,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         this.setState({
             originX: originX,
             originY: originY,
-            zIndex: 10,
+            zIndex: 2,
             lastW: this.state.w,
             lastH: this.state.h
         })
@@ -366,6 +366,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             if (style) {
                 w = style.width ? style.width : w;
                 h = style.height ? style.height : h;
+                console.log(style)
             }
         }
         if (style) {
@@ -383,7 +384,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
                     touchAction: 'none!important',
                     transform: `translate(${x}px,${y}px)`,
                     width: w,
-                    height: h
+                    height: h,
                 }}
                 onMouseDown={this.onDragStart.bind(this)}
                 onTouchStart={this.onDragStart.bind(this)}

src/lib/gridItem.tsx

@@ -38,6 +38,8 @@ export interface GridItemProps {
     style?: React.CSSProperties
 
     bounds?: Bound | 'parent'
+
+    dragType: 'drag' | 'resize'
 }
 
 export interface GridItemEvent {
@@ -148,8 +150,6 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
 
         const w = Math.round((wPx - calWidth * 0.5) / calWidth)
         const h = Math.round((hPx - this.props.rowHeight * 0.8) / this.props.rowHeight)
-        console.log(h);
-
         return checkWidthHeight(this.props.GridX, w, h, this.props.col)
     }
 
@@ -206,7 +206,8 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
             <Dragger
                 style={{
                     ...style, width: wPx, height: hPx, position: 'absolute',
-                    transition: this.props.isUserMove ? '' : 'all .2s'
+                    transition: this.props.isUserMove ? '' : 'all .2s',
+                    zIndex: this.props.isUserMove ? (this.props.dragType === 'drag' ? 10 : 2) : 2
                 }}
                 onDragStart={this.onDragStart}
                 onMove={this.onDrag}