调整大小时如何禁用拖动

Question

我正在使用 dndkit 并重新调整大小。当我调整大小时，组件仍然在移动，如下所示https://codesandbox.io/p/sandbox/dnd-kit-resize-24tcrh?file=%2Fsrc%2FDraggable.js

这是我的代码。

import React, { useState } from "react";
import { useDraggable } from "@dnd-kit/core";
import { Resizable } from "re-resizable";
const CustomStyle = {
  display: "flex",
  width: "140px",
  height: "140px",
  backgroundColor: "#e8e8a2",
};

export function Draggable({ id, content, styles }) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id,
  });

  const style = transform
    ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
      }
    : {};

  const handleResizeStart = () => {
    setIsDraggingTurnOn(false);
  };

  const handleResizeStop = () => {
    setIsDraggingTurnOn(true);
  };
  const [isDraggingTurnOn, setIsDraggingTurnOn] = useState(true);
  const listenersOnState = isDraggingTurnOn ? { ...listeners } : undefined;
  return (
    <div
      ref={setNodeRef}
      style={{ ...style, ...styles }}
      {...listenersOnState}
      {...attributes}
    >
      <Resizable
        style={{ ...CustomStyle }}
        defaultSize={{
          width: 200,
          height: 200,
        }}
        onResizeStart={handleResizeStart}
        onResizeStop={handleResizeStop}
      >
        content
      </Resizable>
    </div>
  );
}

我已经添加了这个监听器，但它似乎不起作用。请问我该如何解决这个问题？任何帮助都适用。

        onResizeStart={handleResizeStart}
        onResizeStop={handleResizeStop}

Answer 1

快速解决方案。您可以在内容方块的右侧（或任何您想要的位置）添加拖动图标。并将 {...listeners} {...attributes} 放在那里。然后将 x、y、ref 保留在父级上，如下所示！

<div ref={setNodeRef} style={{ ...style, top, left, position: 'absolute' }}>
            <Resizable
                style={{ ...CustomStyle }}
                defaultSize={{
                    width: 200,
                    height: 200,
                }}
                onResizeStart={handleResizeStart}
                onResizeStop={handleResizeStop}
            >
                <div {...listeners} {...attributes}>
                    Drag Handle
                </div>
                <div>content</div>
            </Resizable>
        </div>