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

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

На чтение 4 мин Опубликовано 31.10.2024

Содержание

Вопрос или проблема
Ответ или решение
Проблема сохранения стилей
Решение
Заключение

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

Я пытаюсь реализовать функциональность Drag-and-Drop с помощью Dnd-kit. Хотя функциональность перетаскивания работает с приведённым ниже кодом, стили не сохраняются. Есть ли способ сохранить стили через className, когда тег Draggable добавляется в HTML?

Вот как выглядит мой файл Main.tsx:

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>

Вот как выглядит мой файл Draggable.tsx:

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;

Примечание:
Я уже пробовал передавать стили и className в качестве пропса компоненту Draggable, но это не сработало. У меня есть несколько элементов, которые я не хочу делать перетаскиваемыми, поэтому я не могу просто поместить все теги div внутрь тегов Draggable. Любая помощь будет признательна. Спасибо!

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

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

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

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

Решение

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

Передача классов и стилей через пропсы:
Вы можете добавить возможность передачи стилей и классов в компонент 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;

Использование 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;
}
```
Инкапсуляция стилей в компоненте:
Если ваши цели включают сохранение стилей при перетаскивании и вы хотите, чтобы управление стилями оставалось внутри компонента Draggable, можно создать отдельные стили, относящиеся только к стилям при перетаскивании:
```
const style = {
   ...originalStyle,
   transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
   transition: isDragging ? 'none' : 'transform 0.2s ease' // Добавьте плавный переход
};
```

Заключение

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