优化dom层级，自定义拖拽把手和resize把手

src/HandleLayout/index.tsx → example/HandleLayout/index.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Dragact } from '../lib/dragact';
+import { Dragact } from '../../src/lib/dragact'
 
 import './index.css';
 
 const Words = [
     { content: 'You can do anything, but not everything.' },
     { content: 'Those who dare to fail miserably can achieve greatly.' },
-    { content: 'You miss 100 percent of the shots you never take.', handle: true },
+    { content: 'You miss 100 percent of the shots you never take.' },
     { content: 'Those who believe in telekinetics, raise my hand.' },
     { content: 'I’d rather live with a good question than a bad answer.' }
 ]
@@ -20,13 +20,23 @@ const fakeData = () => {
 }
 
 
-const Card = (props: any) => {
-    const item: any = props.item;
+const Card: (item: any) => any = ({ item, provided }) => {
+    const style = { padding: 5, textAlign: 'center', color: '#595959' }
+
+    if (item.key !== '3') {
+        return (
+            <div className='layout-Item' {...provided.props} {...provided.dragHandle}>
+                <div style={style}>
+                    {item.content}
+                </div>
+            </div>
+        )
+    }
     return (
-        <div className='layout-Item' >
-            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>
-                {item.handle ? <div className='card-handle' id="dragact-handle">点我拖动
-            </div> : item.content}
+        <div className='layout-Item' {...provided.props}>
+            <div style={style}>
+                {item.content}
+                <div className='card-handle' {...provided.dragHandle} >点我拖动</div>
             </div>
         </div>
     )
@@ -52,8 +62,8 @@ export class HandleLayout extends React.Component<{}, {}> {
                     <div>
                         <h1 style={{ textAlign: 'center' }}>拖拽把手 Demo</h1>
                         <Dragact {...dragactInit}  >
-                            {(item: any, isDragging: Boolean) => {
-                                return <Card item={item} />
+                            {(item: any, provided: any) => {
+                                return <Card item={item} provided={provided} />
                             }}
                         </Dragact>
                     </div>

src/LayoutRestore/index.tsx → example/LayoutRestore/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Dragact } from '../lib/dragact'
+import { Dragact } from '../../src/lib/dragact'
+import { Card } from '../NormalLayout/index';
 import './index.css';
 
 const Words = [
@@ -21,14 +22,6 @@ const fakeData = () => {
 }
 
 
-const Card = (props: any) => {
-    const item = props.item;
-    return (
-        <div className='layout-Item'>
-            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{item.content}</div>
-        </div>
-    )
-}
 
 
 var storeLayout: any = void 666;
@@ -66,8 +59,8 @@ export class LayoutRestore extends React.Component<{}, {}> {
                 onDragEnd={this.handleOnDragEnd}
 
             >
-                {(item: any) => {
-                    return <Card item={item} />
+                {(item: any, provided: any) => {
+                    return <Card item={item} provided={provided} />
                 }}
             </Dragact>
         )

src/NormalLayout/index.tsx → example/NormalLayout/index.tsx

@@ -1,16 +1,8 @@
 import *as React from 'react';
-import { Dragact, DragactLayoutItem, GridItemProvided } from '../lib/dragact'
+import { Dragact, DragactLayoutItem, GridItemProvided } from '../../src/lib/dragact'
 import { Words } from './largedata'
 import './index.css';
 
-
-interface CardItem {
-    content: string,
-    img: string
-}
-
-
-
 const fakeData = () => {
     var Y = 0;
     return Words.map((item, index) => {
@@ -21,19 +13,16 @@ const fakeData = () => {
 }
 
 
-const Card = (props: any) => {
-    const item: CardItem = props.item;
-    const provided: any = props.provided;
-    console.log(...provided.draggerProps)
+export const Card: (any: any) => any = ({ item, provided }) => {
     return (
         <div
             className='layout-Item'
-            {...provided.draggerProps}
+            {...provided.props}
+            {...provided.dragHandle}
             style={{
-                ...provided.draggerProps.style,
+                ...provided.props.style,
                 background: `${provided.isDragging ? '#eaff8f' : 'white'}`
             }}
-            {...provided.handle}
         >
             <div
                 style={{ padding: 5, textAlign: 'center', color: '#595959' }}
@@ -43,7 +32,7 @@ const Card = (props: any) => {
                 {item.content}
             </div>
             <span
-                {...provided.resizerProps}
+                {...provided.resizeHandle}
                 style={{
                     position: 'absolute',
                     width: 10, height: 10, right: 2, bottom: 2, cursor: 'se-resize',

src/StaticWidget/index.tsx → example/StaticWidget/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dragact } from '../lib/dragact'
+import { Dragact } from '../../src/lib/dragact'
 import './index.css'
 
 const Words = [
@@ -19,13 +19,15 @@ const fakeData = () => {
     })
 }
 
-const Cell = (props: any) => {
-    const { item } = props;
+const Cell: (any: any) => any = ({ item, provided }) => {
     return (
-        <div className={`layout-Cell ${item.static ? "static" : ""}`}
-            style={{ background: item.static ? "#e8e8e8" : "", width: "100%" }}
+        <div
+            {...provided.props}
+            {...provided.dragHandle}
+            className={`layout-Cell ${item.static ? "static" : ""}`}
+            style={{ ...provided.props.style, background: item.static ? "#e8e8e8" : "" }}
         >
-            <div style={{ padding:10,color: '#595959' }}>{item.content}</div>
+            <div style={{ padding: 10, color: '#595959' }}>{item.content}</div>
         </div>
     )
 }
@@ -44,8 +46,8 @@ export const SortedTableWithStatic = () => {
                     layout={fakeData()}
                     placeholder={true}
                 >
-                    {(item: any, isDragging: number) => {
-                        return <Cell item={item} />
+                    {(item: any, provided: any) => {
+                        return <Cell item={item} provided={provided} />
                     }}
                 </Dragact>
             </div>

example/changelog.md

@@ -1,6 +1,8 @@
 v0.1.7
 - 优化性能-使用reselect的原理
 - 拖拽手感优化
+- 优化dom的层级
+- 自定义拖拽把手和resize把手
 
 v0.1.6
 - 修正zIndex的错误

src/mobileLayout/index.tsx → example/mobileLayout/index.tsx

@@ -1,33 +1,29 @@
 import *as React from 'react';
-import { Dragact, DragactLayoutItem } from '../lib/dragact'
+import { Dragact, DragactLayoutItem } from '../../src/lib/dragact'
 import { Words } from './largedata'
 import './index.css';
 
-
-interface CardItem {
-    content: string,
-    img: string
-}
-
-
-
 const fakeData = () => {
     var Y = 0;
     return Words.map((item, index) => {
         if (index % 4 === 0) Y++;
 
-        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '', canResize: false }
+        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index + '' }
     })
 }
 
 
-const Card = (props: any) => {
-    const item: CardItem = props.item;
-    const isDragging: Boolean = props.isDragging;
+const Card: (any: any) => any = ({ item, provided }) => {
     return (
         <div
             className='layout-Item'
-            style={{ background: `${isDragging ? '#eaff8f' : 'white'}` }}>
+            {...provided.props}
+            {...provided.dragHandle}
+            style={{
+                ...provided.props.style,
+                background: `${provided.isDragging ? '#eaff8f' : 'white'}`
+            }}
+        >
             <div
                 style={{ padding: 5, textAlign: 'center', color: '#595959' }}
             >
@@ -39,7 +35,6 @@ const Card = (props: any) => {
     )
 }
 
-
 export class Mobile extends React.Component<{}, {}> {
     render() {
         const margin: [number, number] = [5, 5];
@@ -69,10 +64,10 @@ export class Mobile extends React.Component<{}, {}> {
                             background: '#003A8C'
                         }}
                     >
-                        {(item: DragactLayoutItem, isDragging: Boolean) => {
+                        {(item: DragactLayoutItem, provided: any) => {
                             return <Card
                                 item={item}
-                                isDragging={isDragging}
+                                provided={provided}
                             />
                         }}
                     </Dragact>

src/index.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { LayoutDemo } from './NormalLayout/index';
-import { SortedTableWithStatic } from "./StaticWidget/index";
-import { LayoutRestore } from "./LayoutRestore/index";
-import { HandleLayout } from "./HandleLayout/index";
+import { LayoutDemo } from '../example/NormalLayout/index';
+import { SortedTableWithStatic } from "../example/StaticWidget/index";
+import { LayoutRestore } from "../example/LayoutRestore/index";
+import { HandleLayout } from "../example/HandleLayout/index";
 // import { AddRemove } from "./AddRemove/index";
-import { Mobile } from "./mobileLayout/index";
+import { Mobile } from "../example/mobileLayout/index";
 import './index.css'
 
 

src/lib/dragact.tsx

@@ -181,20 +181,6 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
         const { GridX, GridY, w, h } = bundles
 
         if (this.state.mapLayout) {
-            const newlayout = syncLayout(this.state.mapLayout, bundles)
-
-
-            // this.state = {
-            //     ...this.state,
-            //     GridXMoving: GridX,
-            //     GridYMoving: GridY,
-            //     wMoving: w,
-            //     hMoving: h,
-            //     placeholderShow: true,
-            //     placeholderMoving: true,
-            //     mapLayout: newlayout,
-            //     dragType: 'drag'
-            // }
             this.setState({
                 GridXMoving: GridX,
                 GridYMoving: GridY,
@@ -202,7 +188,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 hMoving: h,
                 placeholderShow: true,
                 placeholderMoving: true,
-                mapLayout: newlayout,
+                mapLayout: syncLayout(this.state.mapLayout, bundles),
                 dragType: 'drag'
             })
         }
@@ -331,7 +317,6 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
         if (mapLayout) {
             const renderItem = layoutItemForkey(mapLayout, child.key);
             if (!padding) padding = 0;
-
             return (
                 <GridItem
                     {...renderItem}
@@ -351,11 +336,11 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     dragType={dragType}
                     key={child.key}
                 >
-                    {(GridItemProvided, resizerProps) => this.props.children(child, {
+                    {(GridItemProvided, dragHandle, resizeHandle) => this.props.children(child, {
                         isDragging: renderItem.isUserMove !== void 666 ? renderItem.isUserMove : false,
-                        handle: { id: 'dragact-handle' },
-                        draggerProps: GridItemProvided,
-                        resizerProps
+                        props: GridItemProvided,
+                        dragHandle,
+                        resizeHandle
                     })}
                 </GridItem >
             )

src/lib/dragger/index.tsx

@@ -65,7 +65,7 @@ interface DraggerProps {
 
     canResize?: Boolean;
 
-    children: (provided: any, resizeMix: any) => any;
+    children: (provided: any, resizeMix: any, dragMix: any) => any;
 }
 
 
@@ -376,24 +376,17 @@ 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 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
-            }
+        var resizeMix = {
+            onMouseDown: this.onResizeStart,
+            onMouseUp: this.onResizeEnd
         }
-
         return {
             dragMix, resizeMix
         };
@@ -427,7 +420,6 @@ export class Dragger extends React.Component<DraggerProps, {}> {
 
 
         const provided = {
-            ...dragMix,
             style: {
                 ...style,
                 touchAction: 'none!important',
@@ -438,7 +430,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
             ref: (node: any) => this.Ref = node
         }
 
-        return this.props.children(provided, resizeMix)
+        return this.props.children(provided, dragMix, resizeMix)
     }
 }
 

src/lib/gridItem.tsx

@@ -47,7 +47,7 @@ export interface GridItemProps {
 
     canResize?: Boolean
 
-    children: (provided: any,resizerProps:any) => any;
+    children: (provided: any, draggerProps: any, resizerProps: any) => any;
 }
 
 export interface GridItemEvent {
@@ -207,7 +207,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(this.props.children)
         return (
             <Dragger
                 style={{
@@ -234,7 +233,7 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
                 canDrag={canDrag}
                 canResize={canResize}
             >
-                {(provided,resizerProps) =>this.props.children(provided,resizerProps)}
+                {(provided, draggerProps, resizerProps) => this.props.children(provided, draggerProps, resizerProps)}
             </Dragger>
         )
     }