React结合Drag API实现拖拽示例详解

const Block = (props) => {
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
    // 向拖拽数据中添加项目    
    e.dataTransfer.setData('text', e.target.dataset.index);
  };
  return (
    <div onDragStart={handleDragStart}>
      <Button draggable data-index="Rectangle">
        二维码
      </Button>
    </div>
  );
};

function DragEditor(props) {
  const { dvaStore, dispatch } = props;
  // 阻止浏览器默认事件，否则 ondrop 不会触发
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
  };
  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    // 获取拖拽元素的组件类型
    const type = e.dataTransfer.getData('text');
    // COMPONENT_LIST 定义了组件的数据格式，根据 type 匹配
    const component = COMPONENT_LIST.filter(
      (i) => i.component === type,
    )[0];
    // 将组件数据添加到 store，画布将会根据数据渲染出组件
    if (component) {
      dispatch?.({
        type: 'store/addComponent',
        payload: component,
      });
    }
  };
  return (...);
}

function DragEditor(props: IEditorProps) {
  const { dvaStore, dispatch } = props;
  const [startAxis, setStartAxis] = React.useState({ x: 0, y: 0 }); // 鼠标开始拖动时的位置
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
    setStartAxis({ x: e.clientX, y: e.clientY });
  };
  const handleDragEnd = (e: React.DragEvent<HTMLDivElement>, data: IComponentSchema) => {
    // 鼠标移动的距离
    const displacementX = e.clientX - startAxis.x;
    const displacementY = e.clientY - startAxis.y;
    // 计算组件的终点位置：初始位置 + 鼠标移动的距离
    const endX = Number(data.style.left) + displacementX;
    const endY = Number(data.style.top) + displacementY;
    // 限制坐标的最小值为 0
    const top = Math.max(endY, 0);
    const left = Math.max(endX, 0);
    // 更新当前组件样式
    dispatch?.({
      type: 'store/setShapeStyle',
      payload: { top, left },
    });
  };
  return (
      {dvaStore.componentsData.map((i) => {
        return (
          <RenderComponent
            type={i.component}
            componentData={i}
            key={i.generateId}
            onDragStart={handleDragStart}
            onDragEnd={(e) => handleDragEnd(e, i)}
          />
        );
      })}
  );
}

export const COMPONENT_LIST = [
  {
    component: 'Rectangle', // 组件名称
    label: '矩形', // 左侧 Blocks 组件列表中显示的名字
    propValue: '', // 组件所使用的值
    icon: 'BorderOuterOutlined', // 左侧组件列表中显示的 icon 图标
    animations: [], // 动画列表
    events: {}, // 事件列表
    style: {    // 组件样式
      width: 100,
      height: 100,
      top: 0,
      left: 0,
    },
  },
  {
    component: 'Text',
    label: '文字',
    propValue: '文字',
    icon: '',
    animations: [],
    events: {},
    style: {
      width: 200,
      height: 33,
      fontSize: 14,
      fontWeight: 500,
      lineHeight: '',
      letterSpacing: 0,
      textAlign: '',
      color: '',
    },
  },
];