So basically, everything works fine when I am using html5 backend, but since my app is going to be used on phones as well, I needed to switch to touch backend. And when I do, everything works fine except that I don't see items that I am dragging. Drop area accepts the items, changes the class and everything, but I just can't see the bloody thing, not on pc and not on mobile. I tried using DragPreviewImage and it works when switching to html5backend but no on touch.

Drag Component:

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

Drop input ponent :

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

So basically, everything works fine when I am using html5 backend, but since my app is going to be used on phones as well, I needed to switch to touch backend. And when I do, everything works fine except that I don't see items that I am dragging. Drop area accepts the items, changes the class and everything, but I just can't see the bloody thing, not on pc and not on mobile. I tried using DragPreviewImage and it works when switching to html5backend but no on touch.

Drag Component:

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

Drop input ponent :

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

• javascript
• reactjs
• drag-and-drop
• react-dnd

• Same here... I just opened an issue here: github./react-dnd/react-dnd/issues/2206 – Pandaiolo Commented Apr 7, 2020 at 14:34
• Did you find a workaround? – Pandaiolo Commented Apr 7, 2020 at 14:41
• Did you find a workaround? – Pandaiolo Commented Apr 7, 2020 at 14:41
• I duplicated my ponent, and used html5backend for when screen is bigger than 480px, and touchbackend for less. So at least now it works on puters, but still doesn't on the phones / touch. – PatrickBateman92 Commented Apr 9, 2020 at 19:26
• 1 @Pandaiolo see my answer. Hopefully that helps. – SimplyComplexable Commented Jun 26, 2020 at 17:14

1 Answer 1

After spending an hour or so trying to figure out this issue myself I found react-dnd-preview which works for my situation. Hopefully this works for you too.