В этой статье блога мы рассмотрим различные методы создания модального перетаскивания в React с использованием Material-UI. Перетаскиваемое модальное окно позволяет пользователям перемещать его по экрану, обеспечивая более интерактивный и удобный интерфейс. Мы рассмотрим несколько подходов и приведем примеры кода, которые помогут вам легко реализовать перетаскиваемые модальные окна в ваших приложениях React.

Метод 1: использование React Draggable
React Draggable — популярная библиотека, которая предоставляет функции перетаскивания компонентам React. Его легко интегрировать с модальными окнами Material-UI. Давайте посмотрим, как:

1. Установить библиотеку React Draggable:

   npm install react-draggable

2. Импортируйте необходимые компоненты:

   import Draggable from 'react-draggable';
   import { Modal, Paper } from '@mui/material';

3. Оберните модальный компонент перетаскиваемым компонентом:

   <Draggable>
   <Modal>
   {/* Modal content */}
   </Modal>
   </Draggable>

Метод 2: использование CSS и ссылок React
Если вы предпочитаете подход на основе CSS, вы можете добиться перетаскиваемого поведения, используя свойства CSS и ссылки React. Вот как:

1. Создайте новый класс CSS для перетаскиваемого модального окна:

   .draggable-modal {
   cursor: move;
   }

2. В вашем компоненте React определите ссылку для модального элемента:

   const modalRef = useRef(null);

3. Прикрепите прослушиватели событий мыши, чтобы включить перетаскивание:

   useEffect(() => {
   const modalElement = modalRef.current;
   let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
   const dragMouseDown = (e) => {
   e = e || window.event;
   e.preventDefault();
   pos3 = e.clientX;
   pos4 = e.clientY;
   document.onmouseup = closeDragElement;
   document.onmousemove = elementDrag;
   };
   const elementDrag = (e) => {
   e = e || window.event;
   e.preventDefault();
   pos1 = pos3 - e.clientX;
   pos2 = pos4 - e.clientY;
   pos3 = e.clientX;
   pos4 = e.clientY;
   modalElement.style.top = (modalElement.offsetTop - pos2) + 'px';
   modalElement.style.left = (modalElement.offsetLeft - pos1) + 'px';
   };
   const closeDragElement = () => {
   document.onmouseup = null;
   document.onmousemove = null;
   };
   const draggableModal = modalElement.querySelector('.draggable-modal');
   draggableModal.addEventListener('mousedown', dragMouseDown);
   
   return () => {
   draggableModal.removeEventListener('mousedown', dragMouseDown);
   };
   }, []);

4. Примените класс CSS и прикрепите ссылку к модальному компоненту:

   <Modal ref={modalRef}>
   <Paper className="draggable-modal">
   {/* Modal content */}
   </Paper>
   </Modal>

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

Не забудьте выбрать метод, который лучше всего соответствует требованиям вашего проекта и предпочтениям в кодировании. Приятного кодирования!