How to disabled dragging when resizing

Question

I am using dndkit and re resizable. When i resizing, the component is still moving as in the here https://codesandbox.io/p/sandbox/dnd-kit-resize-24tcrh?file=%2Fsrc%2FDraggable.js

Here is my code.

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>
  );
}

I have already add this listener but it seems not working. May I ask how can i fix the issue? Any help is appricated.

        onResizeStart={handleResizeStart}
        onResizeStop={handleResizeStop}

Answer 1

A quick solution. You can add a drag icon on the right (or everywhere you want) of the content square. And put the {...listeners} {...attributes} there. And you keep the x, y, ref on the parent like below !

<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>