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

Posted 2023-05-08

【中文标题】看不到我使用 React-dnd 拖动的项目

【英文标题】：Can't see the item that I am dragging using React-dnd

【发布时间】：2020-07-12 13:46:21

【问题描述】：

所以基本上，当我使用 html5 后端时，一切正常，但由于我的应用程序也将在手机上使用，我需要切换到触摸后端。当我这样做时，一切正常，除了我没有看到我正在拖动的项目。 Drop area接受物品，改变班级和一切，但我看不到血腥的东西，不是在电脑上，也不是在手机上。我尝试使用 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"/>
);

【问题讨论】：

这里也一样...我刚刚在这里打开了一个问题：github.com/react-dnd/react-dnd/issues/2206

您找到解决方法了吗？

您找到解决方法了吗？

我复制了我的组件，当屏幕大于 480px 时使用 html5backend，而 touchbackend 则更少。所以至少现在它可以在电脑上运行，但在手机/触摸屏上仍然不行。

@Pandaiolo 看到我的回答。希望这会有所帮助。

【参考方案1】：

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

【讨论】：

它也对我有用。它甚至在文档中说触摸后端没有幽灵功能。 “这个项目是一个与 React DnD 兼容的 React 组件，当后端系统没有（例如 react-dnd-touch-backend）时，它可以用来模拟 Drag'n'Drop “幽灵”。”非常感谢的人！