看不到我正在使用 React-dnd 拖动的项目

Question

所以基本上，当我使用 html5 后端时一切正常，但由于我的应用程序也将在手机上使用，我需要切换到触摸后端。当我这样做时，一切正常，除了我没有看到我正在拖动的项目。 Drop area accept the items, changes the class and everything, 但我就是看不到血腥的东西，不是在电脑上，也不是在移动设备上。我尝试使用 DragPreviewImage，它在切换到 html5 后端但没有触摸时有效。

拖动组件：

const [{isDragging}, drag] = useDrag({
    item: {
        type:ItemTypes.CARD,
        name: props.person,
        id: props.id
    },
    collect: monitor => ({
        isDragging: !!monitor.isDragging(),
      }),
})


return (
    <div
    ref={drag}
    className={`${props.classNameToDisplay} ${isDragging ? 'onDrag' : ""}`}
    id={props.id}
    key={props.person}
    onClick={(e) => props.itemOnClick(e, props.person, props.itemClicked)}>
    {props.person}
</div>
);

删除输入组件：

const DropInput = (props) => {

const[{isOver, canDrop}, drop] = useDrop({
    accept:ItemTypes.CARD,
    canDrop:(item, monitor) => true,
    drop: (item, monitor) => props.itemOnDrop(item,monitor, "regularBet", props.itemClicked),
    collect: monitor => ({
        isOver : !!monitor.isOver(),
        canDrop : !!monitor.canDrop()
    })
})

return (
    <input
    ref={drop}
    className={`${props.classNameToDisplay} ${isOver && canDrop ? 'onDropAllowed' : ''} `}
    onKeyUp={e => props.itemOnKeyUp(e, props.itemClicked)} 
    onChange={e => props.itemOnChange(e, 'name')}
    type="text"
    name={props.itemClicked}
    id={props.itemClicked}
    value={props.itemName}
    placeholder="ime"/>
);

Answer 1

在花了一个小时左右自己尝试解决这个问题后，我发现 react-dnd-preview 适合我的情况。希望这对你也有用。

看不到我正在使用 React-dnd 拖动的项目

Can't see the item that I am dragging using React-dnd

javascript

reactjs

drag-and-drop

react-dnd