Dnd-kit – Как сохранить стилизацию при использовании Draggable?

Вопрос или проблема

import {DndContext} from '@dnd-kit/core';
import Draggable from './Draggable';
.
.
return(
  <div id='container' style={{margin: '10px 15px' }}>
    <div className="flex" style={{marginTop: '10px'}}>
      <DndContext>
        <Draggable id='draggable-1'>
          <p>Привет<p>
        </Draggable>
      </DndContext>
    </div>
  </div>

import React from 'react';
import {useDraggable} from '@dnd-kit/core';

const Draggable = ({id, children}) => {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: id,
  });
  const style = {
    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined
  };
  return (
    <div ref={setNodeRef} style={style} {...listeners} {...attributes}>
      {children}
    </div>
  );
};
export default Draggable;

Ответ или решение

Вопрос о сохранении стилей в компоненте Draggable, использующем библиотеку Dnd-kit, является актуальным, поскольку правильный дизайн интерфейса часто играет решающую роль в восприятии приложения пользователями. Ниже приведены рекомендации по решению этой проблемы, учитывая детали вашего кода.

Проблема сохранения стилей

Вы упомянули, что при использовании функциональности перетаскивания стили не сохраняются. Это связано с тем, что когда элемент перетаскивается, Dnd-kit применяет к нему собственные стили и манипулирует его положением с помощью CSS-трансформаций. Таким образом, если элементы имеют какие-то специфические стили, они могут не проявляться в процессе перетаскивания.

Решение

Для удержания стилей возможно несколько подходов:

1. Передача классов и стилей через пропсы:
   Вы можете добавить возможность передачи стилей и классов в компонент Draggable. Это позволит вам добавлять ваши стили к div, создаваемому внутри компонента Draggable, и позволить использовать собственные классы.

   Измените Draggable.tsx:

   import React from 'react';
   import { useDraggable } from '@dnd-kit/core';
   
   const Draggable = ({ id, children, className = '', style = {} }) => {
    const { attributes, listeners, setNodeRef, transform } = useDraggable({ id });
   
    const computedStyle = {
      transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
      ...style // Добавляем переданные стили
    };
   
    return (
      <div ref={setNodeRef} style={computedStyle} className={className} {...listeners} {...attributes}>
        {children}
      </div>
    );
   };
   
   export default Draggable;

2. Использование CSS для стилизации перетаскиваемого элемента:
   Можно применить CSS-классы как к состоянию перетаскивания (нажатие мыши), так и к обычному состоянию. Dnd-kit предоставляет возможность использовать состояния перетаскивания, чтобы добавить необходимые стили.

   const { isDragging } = useDraggable({ id });
   const className = isDragging ? 'dragging' : '';
   
   return (
    <div ref={setNodeRef} style={computedStyle} className={`my-draggable ${className}`} {...listeners} {...attributes}>
      {children}
    </div>
   );

   Затем добавьте CSS:

   .my-draggable {
    /* базовые стили */
   }
   .my-draggable.dragging {
    /* стили во время перетаскивания, например, измените цвет фона */
    background-color: lightblue;
   }

3. Инкапсуляция стилей в компоненте:
   Если ваши цели включают сохранение стилей при перетаскивании и вы хотите, чтобы управление стилями оставалось внутри компонента Draggable, можно создать отдельные стили, относящиеся только к стилям при перетаскивании:

   const style = {
      ...originalStyle,
      transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
      transition: isDragging ? 'none' : 'transform 0.2s ease' // Добавьте плавный переход
   };

Заключение

Запланируйте реализацию предложенных шагов, чтобы обеспечить сохранение стилей. Посмотрите, как изменения влияют на взаимодействие пользователя. Обратите внимание на удобство использования интерфейса. Применение описанных выше стратегий гарантирует, что ваши компоненты будут нем только функциональными, но и визуально привлекательными. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью.