Possible to make the beautiful shadcn ui carousel dragfree?

[thebeautyofcoding]

Hi there,
since I am using DND kit for drag and drop reordering in my shadcn carousel, I would like to disable the standard drag behavior. I tried everything I could find but nothing worked. I tried dragFree:true on the Carousel without success. Heres my code:

'use client';
import { useState } from 'react';
import Image from 'next/image';
import { cn } from '@/utils/cn';

import { observer } from 'mobx-react-lite';

import { useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import React from 'react';

import { useStores } from '@/store';
import Timeline from './Timeline';
import {
  useCarouselState,
  useCarouselEffects,
  useFrameSelection,
} from '@/components/video-to-gif/carousel-hooks/hooks';
import CarouselSkeleton from './CarouselSkeleton';
import CarouselButton from './CarouselButton';
import { CSS } from '@dnd-kit/utilities';
import {
  DndContext,
  useDroppable,
  MouseSensor,
  TouchSensor,
  KeyboardSensor,
  closestCenter,
  useSensor,
  useSensors,
  PointerSensor,
} from '@dnd-kit/core';
import { SortableContext, arrayMove, useSortable } from '@dnd-kit/sortable';

import {
  CarouselItem,
  CarouselContent,
  CarouselNext,
  CarouselPrevious,
  Carousel,
  CarouselApi,
} from '@/components/ui/carousel';
import { Card, CardContent } from '@/components/ui/card';

gsap.registerPlugin(ScrollToPlugin);
export const EditorCarousel = observer(() => {
  const { isOver, setNodeRef } = useDroppable({
    id: 'carousel',
  });
  const [cardWidth, setCardWidth] = useState<number>(120);
  const {
    store,
    editorCarouselStore,
    currentlySelectedFrame,
    setCurrentlySelectedFrame,
    carouselRef,
  } = useCarouselState(120);
  useCarouselEffects({
    refs: { carouselRef },
    cardWidth,
    setCardWidth: setCardWidth,
    currentlySelectedFrame,
    store,
  });
  const animationStore = useStores().animationStore;
  gsap.registerPlugin(ScrollToPlugin);
  const handleSelectFrame = (index: number) => {
    setCurrentlySelectedFrame(index);
    store.currentKeyFrame = index;
    animationStore.addCurrentGifFrameToCanvas();
  };
  const creatingGifFrames = editorCarouselStore.isCreatingGifs;
  const [carouselWidth, setCarouselWidth] = useState(0);
  useEffect(() => {
    if (carouselRef.current) {
      setCarouselWidth(carouselRef.current.offsetWidth);
    }
  }, [store.frames, store.elements, carouselRef]);
  useFrameSelection({ setCurrentlySelectedFrame, currentlySelectedFrame });
  const handleDeleteFrame = (index: number): void => {
    store.deleteFrame(index); // Assuming this method exists on the store
    if (index === currentlySelectedFrame || index === store.frames.length - 1) {
      const newSelectedIndex = (index === 0 ? 0 : index - 1) % store.frames.length;
      setCurrentlySelectedFrame(newSelectedIndex);
      store.currentKeyFrame = newSelectedIndex;
    }
  };
  const [api, setApi] = React.useState<CarouselApi>();
  const handleNextFrame = () => {
    if (api) {
      api.scrollNext();
      if (currentlySelectedFrame < store.frames.length) {
        setCurrentlySelectedFrame((currentlySelectedFrame + 1) % store.frames.length);
        store.currentKeyFrame = currentlySelectedFrame + 1;
        animationStore.addCurrentGifFrameToCanvas();
      }
    }
  };
  const handlePrevFrame = () => {
    if (api) {
      api.scrollPrev();
      if (currentlySelectedFrame > 0) {
        setCurrentlySelectedFrame(
          (currentlySelectedFrame - 1 + store.frames.length) % store.frames.length,
        );
        store.currentKeyFrame = currentlySelectedFrame - 1;
        animationStore.addCurrentGifFrameToCanvas();
      }
    }
  };

  const sensors = useSensors(
    useSensor(MouseSensor),
    useSensor(TouchSensor),
    useSensor(KeyboardSensor),
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 0.01,
      },
    }),
  );

  const frames = store.frames;

  const handleDragEnd = (event) => {
    const { active, over } = event;
    if (active && over) {
      const oldIndex = frames.findIndex((frame) => frame.id === active.id);
      const newIndex = frames.findIndex((frame) => frame.id === over.id);
      setCurrentlySelectedFrame(oldIndex);
      store.currentKeyFrame = oldIndex;
      store.updateFramesOrder(oldIndex, newIndex);
      setCurrentlySelectedFrame(newIndex);
      store.currentKeyFrame = newIndex;
      animationStore.addCurrentGifFrameToCanvas();
    }
  };

  return (
    <div
      className="max-w-[850px] items-center justify-center space-y-4 rounded-lg bg-gray-300 p-4 "
      ref={setNodeRef}
    >
      <Timeline
        currentFrame={currentlySelectedFrame}
        onSelectFrame={handleSelectFrame}
        totalFrames={store.frames.length}
      />
      <div className="flex items-center justify-center space-x-4 ">
        <CarouselSkeleton
          cardWidth={cardWidth}
          carouselWidth={carouselWidth}
          creatingGifFrames={creatingGifFrames}
        />

        {!creatingGifFrames && (
          <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragEnd={handleDragEnd}
          >
            <SortableContext items={store.frames.map((frame) => frame.id)}>
              <div>
                <Carousel
                  setApi={setApi}
                  opts={{
                    align: 'start',
                    dragFree: true,
                  }}
                  className="flex w-full max-w-sm"
                  ref={carouselRef}
                  orientation="horizontal"
                >
                  <CarouselContent>
                    {store.frames.map((frame, index) => (
                      <SortableItem
                        key={index}
                        id={frame.id}
                        src={frame.src}
                        index={index}
                        onFrameSelect={handleSelectFrame}
                        onFrameDelete={handleDeleteFrame}
                        isSelected={index === store.currentKeyFrame}
                      />
                    ))}
                  </CarouselContent>
                  <CarouselPrevious onClick={handlePrevFrame} />
                  <CarouselNext onClick={handleNextFrame} />
                </Carousel>
              </div>
            </SortableContext>
          </DndContext>
        )}
      </div>
    </div>
  );
});

interface Frame {
  id: string;
  src: string;
  index: number; // Add index if necessary for handling specific interactions
}

interface SortableItemProps extends Frame {
  onFrameSelect: (index: number) => void;
  onFrameDelete: (index: number) => void;
  index: number;
  isSelected: boolean;
}

const SortableItem: React.FC<SortableItemProps> = observer(
  ({ id, src, index, onFrameSelect, onFrameDelete, isSelected }) => {
    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });

    const style = {
      transform: CSS.Transform.toString(transform),
      transition,
    };
    const store = useStores().editorCarouselStore;
    return (
      <CarouselItem
        key={index}
        ref={setNodeRef}
        style={style}
        {...attributes}
        {...listeners}
        className="relative cursor-pointer transition-colors duration-200 ease-in-out md:basis-1/2 lg:basis-1/3"
        onMouseDown={(e) => {
          e.stopPropagation();
          onFrameSelect(index);
        }}
      >
        {isSelected && (
          <div className="absolute inset-0 bg-primary opacity-50 transition-all duration-300"></div>
        )}
        <div className="p-1">
          <Card>
            <CardContent>
              <Image
                src={src}
                alt={`Frame ${index}`}
                onLoad={(image) => {
                  store.cardItemHeight = image.currentTarget.naturalHeight;
                  store.cardItemWidth = image.currentTarget.naturalWidth;
                }}
                id={id}
                width={120}
                height={70}
                className="rounded-lg object-cover "
              />

              {/* <button
          onMouseDown={(e) => {
            e.stopPropagation(); // Prevent triggering onSelect when clicking delete
            onFrameDelete(index);
          }}
          className="absolute z-20 text-white right-2 top-2"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="w-6 h-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button> */}
            </CardContent>
          </Card>
        </div>
      </CarouselItem>
    );
  },
);

[thebeautyofcoding]

Ah, nevermind,

using watchDrag:false as well disabled the drag-functionality completely.

        <Carousel
              setApi={setApi}
              opts={{
                align: 'start',
                dragFree: true,
                watchDrag: false,
              }}
              className="flex w-full max-w-sm"
              ref={carouselRef}
              orientation="horizontal"
            >
               ...
  </Carousel>

[bastien-vdb]

thank you sooo much

[akz3ro]

thank you

[arifikhsan]

you saved my life. thank you sir