在React dnd中,previewOptions似乎无法与useDrag一起使用

问题描述

我一直在尝试通过在我的useDrag中添加带有值PreviewOptions:{offsetX:0,offsetY:0}的PreviewOptions来将相对于指针的预览图像位置固定在左上方,但似乎没有任何效果。无论是否使用useDrag,我都可以通过任何方式解决此问题?

        const Items = ({
  name,icon,preview: imageSource,}) => {
  const [{ isDragging },drag,preview] = useDrag({
    item: { name,type: 'item' },previewOptions: {
      offsetX: 0,offsetY: 0,},collect: (monitor) => ({
      isDragging: monitor.isDragging(),}),});
  const opacity = isDragging ? 'opacity: 0.5' : 'opacity: 1';
  return (
    <>
      <DragPreviewImage connect={preview} src={imageSource} />
      <div ref={drag} className={className} style={{ opacity }}>
       <div>
          <img src={icon} alt="img" />
        </div>
      </div>
    </>
  );
};

我试图做的事情类似于拖动draw.io

You see when i started to drag my pointer is at the bottom right

But while i'm dragging the poiter will automaticly at the top left ( not depending on the start to drag position

解决方法

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

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

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