react-dnd使用添加覆盖层自定义拖拽层样式

拖拽时候图标快照
getEmptyImage()：返回透明空值的函数 。使用connect.dragPreview()完全隐藏浏览器绘制拖动预览。方便使用绘制。请注意，自定义拖动预览在IE中不起作用，默认的是半透明的拖拽样式

//box组件
import React, { useEffect, useState } from 'react';
import { useDrag, useDragLayer } from 'react-dnd';
import CustomDragLayer from './CustomDragLayer';
import { getEmptyImage } from 'react-dnd-html5-backend';

const BoxItem = (props: any) => {
  // 使用 useDrag
  //monitor 是drag的 monitor
  const [{ isDragging }, drager, dragPreview] = useDrag(() => ({
    // 必需的。这必须是字符串或符号。只有为相同类型注册的放置目标才会对此项目做出反应
    type: 'BoxItem',
    // 1.当这是一个对象时，这是拖放目标唯一可用的关于拖动源的信息
    // 2.当这是一个函数时，它在拖动操作开始时被触发并返回一个表示拖动操作的对象（参见第一个项目符号）。如果返回null，则取消拖动操作
    item: (monitor) => {
      return {
        monitor,
        type: 'box',
        itemName: '检查报告',
      };
    },
    // 组件停止拖拽时触发，item 是 drop 组件在 drop 方法执行时返回的对象，等同于 mintor.getDropResult() 的值
    end: (_item, monitor) => {    },
    options: {
      dropEffect: 'move',
    },
    collect: (monitor: any) => ({
      isDragging: monitor.isDragging(),
    }),
  }));
  // if (isDragging) {
  //   return <div ref={drager} />;
  // }
  useEffect(() => {
    dragPreview(getEmptyImage(), { captureDraggingState: true });
  }, []);
  const opacity = isDragging ? 0 : 1;
  return (
    <>
        <div className={styles.listbox} ref={drager}>
          <div style={{ cursor: 'pointer', opacity }}></div>
        </div>
        {/* 拖拽层组件  */}
        <CustomDragLayer />
    </>
  );
};

export default BoxItem; 

自定义拖拽预览

1 .本质是原来的不动，单独整体添加一个拖拽层

2 .当发现有被拖拽的组件，就渲染一个被拖拽的组件跟随鼠标。

3 .原来的组件的跟随鼠标隐藏掉

4 .放下鼠标，渲染层的组件消失

//CustomDragLayer 组件
import React from 'react';
import { useDragLayer } from 'react-dnd';
import styles from '../style.less';
const CustomDragLayer = (props: any) => {
  const { itemType, isDragging, item, initialOffset, currentOffset } = useDragLayer((monitor) => ({
    item: monitor.getItem(),
    itemType: monitor.getItemType(),
    initialOffset: monitor.getInitialSourceClientOffset(),
    currentOffset: monitor.getSourceClientOffset(),
    isDragging: monitor.isDragging(),
  }));
  if (!isDragging) {
    return null;
  }
  return (
    <div
      style={{
        transform: `translate(${currentOffset?.x}px, ${currentOffset?.y}px)`,
        position: 'fixed',
        top: 0,
        left: 0,
        pointerEvents: 'none'
      }}
    >
      <span className={styles.listName}>{item.itemName}</span>
    </div>
  );
};

export default CustomDragLayer;