gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 16:04:27 25 4
gpt4 key购买 nike

所以基本上,当我使用 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"/>
);

最佳答案

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

关于javascript - 看不到我使用 React-dnd 拖动的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60960230/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com