➕新增拖拽把手

example/changelog.md

@@ -1,6 +1,6 @@
 v0.1.5
 - 修正zIndex的错误
-
+- 新增拖拽把手
 
 v0.1.3
 

src/HandleLayout/index.css

@@ -0,0 +1,7 @@
+.card-handle {
+    cursor: move;
+    background: #595959;
+    color: white;
+    border-radius: 5px;
+    
+}

src/HandleLayout/index.tsx

@@ -0,0 +1,62 @@
+import *as React from 'react';
+import { Dragact } from '../lib/dragact';
+
+import './index.css';
+
+const 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' }
+]
+
+
+const Card = (props: any) => {
+    const item: any = props.item;
+    const dataSet: any = props['data-set'];
+    return (
+        <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>
+    )
+}
+
+
+export class HandleLayout extends React.Component<{}, {}> {
+    dragactNode: Dragact;
+    state = {
+        layout: []
+    }
+
+    componentDidMount() {
+        this.setState({
+            layout: this.dragactNode.getLayout()
+        })
+    }
+
+    render() {
+        const margin: [number, number] = [5, 5];
+        const dragactInit = {
+            width: 800,
+            col: 12,
+            rowHeight: 800 / 12,
+            margin: margin,
+            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>
+        )
+    }
+}

src/index.tsx

@@ -4,16 +4,16 @@ 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'
 
-
-
 const DemoMap: any = {
     normalLayout: <LayoutDemo />,
     SortedTable: <SortedTable />,
     StaticHeader: <SortedTableWithStatic />,
-    LayoutRestore: <LayoutRestore />
+    LayoutRestore: <LayoutRestore />,
+    HandleLayout: <HandleLayout />
 }
 
 class DemoDispatcher extends React.Component<{}, {}> {
@@ -37,6 +37,7 @@ class DemoDispatcher extends React.Component<{}, {}> {
                     <button onClick={() => this.handleLayoutChange('SortedTable')}>SortedTable</button>
                     <button onClick={() => this.handleLayoutChange('StaticHeader')}>StaticHeader</button>
                     <button onClick={() => this.handleLayoutChange('LayoutRestore')}>LayoutRestore</button>
+                    <button onClick={() => this.handleLayoutChange('HandleLayout')}>HandleLayout</button>
                 </div>
                 {this.state.demo}
             </div>

src/lib/dragact.tsx

@@ -18,6 +18,7 @@ export interface DragactLayoutItem {
     h: number
     isUserMove?: Boolean
     key?: number | string
+    handle?: Boolean
 }
 
 export interface DragactProps {
@@ -293,6 +294,7 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                     onResizeStart={this.onResizeStart}
                     onResizeEnd={this.onResizeEnd}
                     dragType={dragType}
+                    handle={renderItem.handle}
                 >
                     {child}
                 </GridItem >

src/lib/dragger/index.tsx

@@ -57,7 +57,9 @@ interface DraggerProps {
     style?: React.CSSProperties,
 
     w?: number,
-    h?: number
+    h?: number,
+
+    handle?: Boolean
 }
 
 export class Dragger extends React.Component<DraggerProps, {}> {
@@ -109,7 +111,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
 
 
 
-    move(event: MouseEvent | TouchEvent) {
+    move(event: any) {
 
         let { lastX, lastY } = this.state
         /*  event.client - this.state.origin 表示的是移动的距离,
@@ -184,13 +186,14 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         })
     }
 
-    onDragStart(event: MouseEvent | TouchEvent) {
+    onDragStart = (event: any) => {
         /** 保证用户在移动元素的时候不会选择到元素内部的东西 */
         doc.body.style.userSelect = 'none'
 
-        // if (this.props.hasDraggerHandle) {
-        //     if (event.target.className !== 'handle') return
-        // }
+        if (this.props.handle) {
+            if (event.target.id !== 'dragact-handle') return
+        }
+
 
         /**
          * 把监听事件的回掉函数，绑定在document上
@@ -245,7 +248,7 @@ export class Dragger extends React.Component<DraggerProps, {}> {
         })
     }
 
-    onDragEnd(event: MouseEvent | TouchEvent) {
+    onDragEnd(event: any) {
         /** 取消用户选择限制，用户可以重新选择 */
         doc.body.style.userSelect = ''
         this.parent = null
@@ -366,10 +369,10 @@ 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) {
+            //使得初始化的时候，不会有从0-1缩放动画
             w = w === 0 ? style.width : w;
             h = h === 0 ? style.height : h;
         }
@@ -386,10 +389,10 @@ export class Dragger extends React.Component<DraggerProps, {}> {
                     width: w,
                     height: h,
                 }}
-                onMouseDown={this.onDragStart.bind(this)}
-                onTouchStart={this.onDragStart.bind(this)}
-                onTouchEnd={this.onDragEnd.bind(this)}
-                onMouseUp={this.onDragEnd.bind(this)}
+                onMouseDown={this.onDragStart}
+                onTouchStart={this.onDragStart}
+                onTouchEnd={this.onDragEnd}
+                onMouseUp={this.onDragEnd}
             >
                 {React.Children.only(this.props.children)}
                 <span

src/lib/gridItem.tsx

@@ -40,6 +40,8 @@ export interface GridItemProps {
     bounds?: Bound | 'parent'
 
     dragType: 'drag' | 'resize'
+
+    handle?: Boolean
 }
 
 export interface GridItemEvent {
@@ -198,7 +200,7 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
 
     render() {
 
-        const { w, h, style, bounds, GridX, GridY } = this.props
+        const { w, h, style, bounds, GridX, GridY, handle } = this.props
         const { x, y } = this.calGridItemPosition(GridX, GridY)
         const { wPx, hPx } = this.calWHtoPx(w, h);
         return (
@@ -221,6 +223,7 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
                 h={hPx}
                 isUserMove={this.props.isUserMove}
                 bounds={bounds}
+                handle={handle}
             >
                 <div style={{ height: '100%', width: "100%" }}>
                     {React.Children.map(this.props.children, (child) => child)}