在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 (将#修改为@）