React Beautiful DND — популярная библиотека, обеспечивающая плавное и интуитивно понятное перетаскивание в приложениях React. Однако могут возникнуть ситуации, когда вы захотите отключить перетаскивание определенных элементов. В этой статье блога мы рассмотрим различные способы достижения этой цели в удобной для пользователя форме, используя разговорные объяснения и практические примеры кода.

Метод 1: отключение перетаскивания с помощью свойства «перетаскивание»
Один простой способ отключить перетаскивание в React Beautiful DND — установить для свойства «перетаскивание» значение «false» для нужного компонента. Вот пример:

import { Draggable } from 'react-beautiful-dnd';
const MyComponent = () => {
  return (
    <Draggable draggableId="item-1" index={0} isDragDisabled>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={{
            background: snapshot.isDragging ? 'lightblue' : 'white',
            ...provided.draggableProps.style
          }}
        >
          {/* Component content */}
        </div>
      )}
    </Draggable>
  );
};

В этом примере для свойства isDragDisabled установлено значение true для компонента Draggable, что предотвращает его перетаскивание.

Метод 2: Условное «перетаскиваемое» свойство
Другой подход заключается в условной установке «перетаскиваемого» свойства на основе некоторого состояния или условия. Это позволяет вам динамически контролировать, включено или отключено перетаскивание. Вот пример:

import { Draggable } from 'react-beautiful-dnd';
const MyComponent = ({ isDraggingEnabled }) => {
  return (
    <Draggable draggableId="item-1" index={0} isDragDisabled={!isDraggingEnabled}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          style={{
            background: snapshot.isDragging ? 'lightblue' : 'white',
            ...provided.draggableProps.style
          }}
        >
          {/* Component content */}
        </div>
      )}
    </Draggable>
  );
};

В этом примере свойство isDraggedEnabled используется для условной установки свойства isDragDisabled компонента Draggable. Если для параметра isDraggedEnabled установлено значение false, перетаскивание отключено.

Метод 3: настраиваемый маркер перетаскивания
Если вы хотите отключить перетаскивание только для маркера перетаскиваемого компонента, но при этом разрешить перетаскивание из других областей, вы можете создать собственный элемент маркера перетаскивания и условно применить свойство «перетаскивание». Вот пример:

import { Draggable } from 'react-beautiful-dnd';
const MyComponent = () => {
  return (
    <Draggable draggableId="item-1" index={0}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          style={{
            background: snapshot.isDragging ? 'lightblue' : 'white',
            ...provided.draggableProps.style
          }}
        >
          <div {...provided.dragHandleProps}>
            {/* Drag handle content */}
          </div>
          {/* Component content */}
        </div>
      )}
    </Draggable>
  );
};

В этом примере свойство «перетаскивание» не применяется к внешнему элементу div, а вместо этого применяется к внутреннему элементу div «перетаскиваемый маркер». Это позволяет перетаскивать только при взаимодействии с конкретным элементом маркера перетаскивания.

В этой статье мы рассмотрели несколько способов отключения перетаскивания в React Beautiful DND. Используя «перетаскиваемый» реквизит, условный рендеринг или настраиваемые маркеры перетаскивания, вы можете легко управлять поведением перетаскивания в ваших приложениях React. Не забудьте выбрать метод, который лучше всего соответствует вашим конкретным требованиям.

Используя эти методы, вы можете улучшить взаимодействие с пользователем ваших приложений React и обеспечить плавный интерфейс, предотвращая при этом нежелательные действия перетаскивания.