如何解决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 举报,一经查实,本站将立刻删除。