Safari上不存在拖动时反应DnD鬼图像

问题描述

在Safari中不存在拖动时的鬼影，但在Chrome，Microsoft Edge和Mozilla中存在。

我不知道我的代码出了什么问题，但是我很确定这是Safari问题。如果有人可以给我解决此问题的方法，我将不胜感激。

这是我的代码供参考。

谢谢！

import React from 'react'
import { DragSource,useDrag } from 'react-dnd'


const backgroundsList = {
  trash:
    '/trash1.png',trash2:
    '/trash2.png',trash1:
    '/trash3.png',trash3:
    '/trash4.png',trash4:
    '/trash5.png',trash5:
    '/trash6.png'
  
};


const style = {
  backgroundSize: 'cover',backgroundRepeat: 'no-repeat',height: '108px',// backgroundColor: 'blue',padding: '0.5rem 1rem',marginRight: '1rem',marginLeft: '1rem',marginTop: '1rem',marginBottom: '1px',cursor: 'grab',float: 'left',// width: "calc((28% - 60px) - 1px)",width: "120px",alignItems: 'center',transform: 'translate(0,0)'
}


export const Box = ({ name,isDropped,type,isDragging,connectDragSource,bgImageName }) => {
  // const opacity = isDragging ? 1 : 1
  const [{ opacity },drag] = useDrag({
    item: { name,type},collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),}),})
  const backgroundColor = isDragging ? 'transparent' : 'transparent'
  const visibility = isDropped ? 'hidden' : 'vissible'
  let backgroundImage = `url(${backgroundsList[bgImageName]})`;
  return connectDragSource(
    <div 
      ref={drag}
      style={{ 
      ...style,opacity,backgroundColor,visibility,backgroundImage
    }}
    >
      {isDropped ? <s>{name}</s> : name}
    </div>
  )
}
export default DragSource(
  (props) => props.type,{
    beginDrag: (props) => ({ name: props.name }),},(connect,monitor) => ({
    connectDragSource: connect.dragSource(),isDragging: monitor.isDragging(),)(Box)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-dnd reactjs reactjs safari