Next.js Discord

Discord Forum

Draggable with panning

Unanswered
Spotted Redshank posted this in #help-forum
Open in Discord
Spotted RedshankOP
My component is not being dragged anymore. I found in the docs that panning.excluded would exclude it but it does not seem to work.

2 Replies

Spotted RedshankOP
"use client"
import BlockNavigation from './block-navigation';
import Block from './block';
import BlockConfig from '../../../config/block';
import {
  TransformWrapper,
  TransformComponent,
} from "react-zoom-pan-pinch";

export default function Page() {

  return (
    <div>
      <BlockNavigation />
      <TransformWrapper
      initialPositionX={0}
      initialPositionY={0}
      maxScale={3}
      minScale={0.5}
      limitToBounds={false}
      panning={{ excluded: ["draggable"] }}
      >
        <TransformComponent>
          
          <div  className="h-screen w-screen bg-bg-one flex justify-center items-center z-50 ">
            
            <div className='w-fit h-fit test draggable '>

              <Block blockData={BlockConfig['add-roles-everyone']}></Block>
              <Block blockData={BlockConfig['add-roles-everyone']}></Block>
              <Block blockData={BlockConfig['add-roles-everyone']}></Block>
              <Block blockData={BlockConfig['add-roles-everyone']}></Block>
              <Block blockData={BlockConfig['add-roles-everyone']}></Block>

            </div>

          </div>

        </TransformComponent>
      </TransformWrapper>
    </div>
  );

}