如何解决在Firefox中反应DnD图像预览错误
我遇到的问题是,当我开始拖动对象时,图像预览大于拖动对象的正常大小,并且其不透明度降低(我没有使用断开的拖动预览)。顺便说一下,它在chrome中工作得很好。 操作系统:Windows 10- Firefox版本:79.0, 您可以在here
中看到正常大小与拖动大小这是代码:
import React,{ useState } from 'react';
import { useDrag } from 'react-dnd';
const DragObject = ({objectdata}) => {
const [dropped,setDropped] = useState(false);
const [place,setPlace] = useState();
const [{ isDragging },dragRef] = useDrag({
item: { id: objectdata.id,type: 'anything' },end: (item,monitor) => {
const dropResult = monitor.getDropResult();
if (item && dropResult) {
setDropped(true);
setPlace(dropResult.place);
}
},collect: (monitor) => ({
isDragging: monitor.isDragging(),}),});
const opacity = isDragging ? 0 : 1;
return (
<>
<img
ref={dragRef}
src={objectdata.image}
alt={objectdata.title}
className="object"
style={{
position: 'absolute',left: (dropped
&& place) ? `${place.x}%` : `${objectdata.x}%`,top: (dropped
&& place) ? `${place.y}%` : `${objectdata.y}%`,width: `${objectdata.size}%`,objectFit: 'contain',zIndex: '7',cursor: 'move',opacity,}}
/>
</>
);
};
export default DragObject;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。