@zat-design/drag-and-resize

组件功能描述

Install

$ npm i @zat-design/drag-and-resize --save

Usage

import DragAndResize, { addDragContext } from '@zat-design/drag-and-resize';
import * as React from 'react';
import { useRef, useState, useEffect } from 'react';


interface CompareItem {
  id: string,
  width: number;
  height: number;
  top: number;
  left: number;
  bottom: number;
  right:number;
  centerX: number;
  centerY:number;
}

interface DragData  {
  dragData: {};
  compareData: CompareItem[];
  contextData: {
    width: number;
    height: number;
    top: number;
    left: number;
    bottom: number;
    right:number;
    centerX: number;
    centerY:number;
  };
}

const item = {
  style: {
    position: 'absolute',
    left: 200,
    top: 0,
    width: 100,
    height: 100,
  },
  dragId: '3333'
} 
export default () => {
  const wrapContext = useRef();
  const dragGroupId = '111111';

  const [itemData, setItemData] = useState({...item});
  useEffect(() => {
    addDragContext(dragGroupId, wrapContext.current)
  }, [])
  const onDragMove = (data: DragData) => {
    const {dragData} = data
    setItemData({
      ...itemData,
      style: {
        ...itemData.style,
        ...dragData
      }
    })
  };
  const onDragEnd = () => {};
  const onResizeMove = (data: DragData) => {
 
    const {dragData} = data
    console.log(dragData)
    setItemData({
      ...itemData,
      style: {
        ...itemData.style,
        ...dragData
      }
    })
  };
  const onResizeEnd = () => {};
  return (
    <div
      style={{
        position: 'relative',
        height: 500,
        width: 1000,
        border: '1px solid red'
      }}
      ref={wrapContext}
    >
      <DragAndResize
        dragGroupId={dragGroupId}
        dragId={itemData.dragId}
        onDragMove={onDragMove}
        onDragEnd={onDragEnd}
        dragStyle={itemData.style}
        onResizeMove={onResizeMove}
        onResizeEnd={onResizeEnd}
      >
        {
          (formatStyle) => {
            return  <div style={formatStyle}>11111</div>
          }
        }
      </DragAndResize>

      <DragAndResize
        dragGroupId={dragGroupId}
        dragId={'1111'}
        onDragMove={() => {}}
        onDragEnd={() => {}}
        dragStyle={{...item.style, left: 100}}
        onResizeMove={() => {}}
        onResizeEnd={() => {}}
      >
        {
          (formatStyle) => {
            return  <div style={formatStyle}>222222</div>
          }
        }
      </DragAndResize>
    </div>
  );
};