0

I have list with draggable elements.

When I'm adding elements to list Dragging is turned on for 1 sec. Looks like on the first render o element it turns on. It is important because when isDragging is true hover of element is turn on. So it is like when you add element to list there is hover for 1 sec and it disappears.

I've tried to disable attributes, listeners, setNodeRef, transform, transition, isDragging, sensors, modify sensors, but none of that worked.

Did someone had same problem?

List:

  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: {
        distance: 8,
      },
    }),

    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    }),
  );

  return (
        <DndContext
          sensors={sensors}
          collisionDetection={closestCenter}
          onDragEnd={handleDragEnd}
          modifiers={[restrictToVerticalAxis, restrictToParentElement]}
        >
          <SortableContext items={sortableUniqueIdentifier as string[]} strategy={verticalListSortingStrategy}>
            {items?.map({id}) => (
                <SortableItem
                  key={id}
                  id={id}
                />
              ),
            )}
          </SortableContext>
        </DndContext>
  );

elements:

  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });

  const style = {
    transform: CSS.Translate.toString(transform),
    transition,
    touchAction: 'none',
  };

  return (
    <div key={id} ref={setNodeRef as React.ForwardedRef<HTMLDivElement>} style={style}>
      <p className="text">SOME TEXT </p>
      <Button className="draggingButton" {...attributes} {...listeners}>
        <Image src="/dnd-button.svg" alt="dnd image" width={24} height={24} />
      </Button>
    </div>
  );
Werthis
  • 557
  • 3
  • 15

0 Answers0