因此，基本上，当我使用html5后端时一切正常，但是由于我的应用程序也将在手机上使用，因此我需要切换到触摸后端。而且当我这样做时，除了看不到我要拖动的项目之外，其他一切都正常。放置区域接受项目，更改班级和所有内容，但是我只是看不到血腥的东西，不在PC和移动设备上。我尝试使用DragPreviewImage，并且在切换到html5backend时可以使用，但触摸时不起作用。

拖动组件：

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"/>
);