react-dnd使用添加覆盖层-1

拖拽时候图标快照

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

自定义拖拽预览

1 .他的本质其实是原来的不动，单独整体添加一个拖拽层
2 .当发现有被拖拽的组件，就渲染一个被拖拽的组件跟随鼠标。
3 .原来的组件的跟随鼠标隐藏掉
4 .放下鼠标，渲染层的组件消失

// 给拖拽的元素加一个自定义样式
import React,{CSSProperties} from 'react'
import {useDragLayer} from 'react-dnd'
import Box from './box'
const layerStyles:CSSProperties={
    position:"fixed",
    pointerEvents:'none',
    zIndex:100,
    left:0,
    top:0,
}
export default function CustomDragLayer(){
    const {
        itemType,
        isDragging,
        item,
        initialOffset,
        currentOffset
    }=useDragLayer(monitor=>({
        item:monitor.getItem(),
        itemType:monitor.getItemType(),
        initialOffset:monitor.getInitialSourceClientOffset(),
        currentOffset:monitor.getSourceClientOffset(),
        // 这个是当前鼠标的相对位置
        isDragging:monitor.isDragging()
    }))
    function getItemStyles(initialOffset:any, currentOffset:any) {
        if (!initialOffset || !currentOffset) {
          return {
            display: "none"
          };
        }
        let { x, y } = currentOffset;
        const transform = `translate3d(${x}px, ${y}px,0)`;
        return {
          transform,
          WebkitTransform: transform,
          position:"absolute" as "absolute",
        };
    }
    console.log(itemType)
    function renderItem(){
        switch (itemType){
            case 'GLASS':
                return <Box name="item" type="GLASS" isDropped={true} />
            default:
                return null
            // 拖拽的有新的组件可以添加到这里
        }
    }
    return (
        <div style={layerStyles}>
            <div style={getItemStyles(initialOffset,currentOffset)}>
                {renderItem()}
            </div>
        </div>
    )
}

//核心

//使用
<CustomLayer></CustomLayer>
//鼠标拖拽显示的覆盖层

<Box name="bottle" type="GLASS" isDropped={true} />
//实际的所有拖拽组件