Компонент Draggable из библиотеки компонентов WordPress позволяет добавить поддержку перетаскивания для элементов, включая настройку изображения и данных, которые передаются при событии «drag». Этот компонент помогает разделить элемент, который инициирует перетаскивание, и элемент, который фактически перетаскивается, что делает процесс создания удобного интерфейса более гибким.
Импорт и базовое использование
Для начала работы с Draggable импортируйте его из библиотеки компонентов WordPress:
import { Draggable, Panel, PanelBody } from '@wordpress/components';
import { Icon, more } from '@wordpress/icons';
Основной пример
В этом примере создается панель с заголовком и иконкой, которая может быть перетаскиваема с использованием компонента Draggable. Иконка more используется как «ручка» (drag handle) для перетаскивания, и с помощью elementId задается ID элемента, который будет клонироваться при перетаскивании.
const DraggableExample = () => (
<div id="draggable-panel">
<Panel header="Перетаскиваемая панель">
<PanelBody>
<Draggable elementId="draggable-panel" transferData={{}}>
{({ onDraggableStart, onDraggableEnd }) => (
<div
className="example-drag-handle"
draggable
onDragStart={onDraggableStart}
onDragEnd={onDraggableEnd}
>
<Icon icon={more} />
</div>
)}
</Draggable>
</PanelBody>
</Panel>
</div>
);
Подробное описание пропсов
Компонент Draggable поддерживает множество параметров, которые позволяют гибко настроить поведение элемента при перетаскивании.
appendToOwnerDocument(опциональный)- Тип:
boolean - Указывает, добавлять ли клонированный элемент в
bodyдокумента, в котором он находится. По умолчанию элемент добавляется к обертке, которая содержит его ID.
- Тип:
Пример использования:
<Draggable elementId="draggable-panel" appendToOwnerDocument={true} />
elementId(обязательный)- Тип:
string - ID HTML-элемента, который будет клонироваться при перетаскивании. Это обязательно, так как
Draggableдолжен знать, какой элемент необходимо клонировать.
- Тип:
Пример использования с элементом ID:
<Draggable elementId="unique-panel-id" transferData={{ key: "value" }} />
onDragEnd(опциональный)- Тип:
(event: DragEvent) => void - Функция, вызываемая при завершении перетаскивания. Получает объект события
dragendв качестве параметра. Полезно для очистки состояния или выполнения других действий по завершении перетаскивания.
- Тип:
Пример использования onDragEnd:
<Draggable elementId="draggable-panel" onDragEnd={(event) => console.log("Перетаскивание завершено")} />
onDragOver(опциональный)- Тип:
(event: DragEvent) => void - Функция, вызываемая при наведении элемента на допустимую зону перетаскивания. Получает объект события
dragoverкак параметр.
- Тип:
Пример использования onDragOver:
<Draggable elementId="draggable-panel" onDragOver={(event) => console.log("Перетаскиваемый элемент наведен")} />
onDragStart(опциональный)- Тип:
(event: DragEvent) => void - Функция, вызываемая при начале перетаскивания. Получает объект события
dragstartкак параметр, что полезно для задания начальных данных или обновления состояния.
- Тип:
Пример использования onDragStart:
<Draggable elementId="draggable-panel" onDragStart={(event) => console.log("Перетаскивание начато")} />
transferData(обязательный)- Тип:
unknown - Объект, содержащий произвольные данные, которые будут переданы при событии перетаскивания. Эти данные можно использовать на стороне получателя.
- Тип:
Пример с передачей данных:
<Draggable elementId="draggable-panel" transferData={{ itemId: 123 }} />
Настройка своих обработчиков событий для начала и завершения перетаскивания
Этот пример демонстрирует, как использовать onDragStart и onDragEnd для добавления пользовательских обработчиков событий, которые будут вызываться вместе со стандартными обработчиками Draggable.
function CustomDraggable({ onDragStart, onDragEnd }) {
return (
<div id="custom-draggable-panel">
<Panel header="Кастомная панель">
<PanelBody>
<Draggable
elementId="custom-draggable-panel"
transferData={{ id: 'custom-123' }}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
>
{({ onDraggableStart, onDraggableEnd }) => (
<div
className="custom-drag-handle"
draggable
onDragStart={onDraggableStart}
onDragEnd={onDraggableEnd}
>
<Icon icon={more} />
</div>
)}
</Draggable>
</PanelBody>
</Panel>
</div>
);
}
// Использование компонента с кастомными обработчиками
function App() {
const handleDragStart = () => console.log("Началось кастомное перетаскивание");
const handleDragEnd = () => console.log("Завершилось кастомное перетаскивание");
return <CustomDraggable onDragStart={handleDragStart} onDragEnd={handleDragEnd} />;
}
Пример с добавлением данных для передачи
В следующем примере объект transferData передает ID перетаскиваемого элемента и тип, который можно использовать в дальнейших операциях, таких как обработка сброса на цель.
function DraggableWithTransferData() {
return (
<div id="data-draggable-panel">
<Panel header="Перетаскиваемая панель с данными">
<PanelBody>
<Draggable
elementId="data-draggable-panel"
transferData={{ itemId: 456, itemType: 'panel' }}
>
{({ onDraggableStart, onDraggableEnd }) => (
<div
className="data-drag-handle"
draggable
onDragStart={onDraggableStart}
onDragEnd={onDraggableEnd}
>
<Icon icon={more} />
</div>
)}
</Draggable>
</PanelBody>
</Panel>
</div>
);
}
Заключение
Компонент Draggable делает настройку перетаскиваемых элементов интуитивной и гибкой. Использование его параметров, таких как elementId, transferData, onDragStart, и onDragEnd, позволяет легко интегрировать перетаскиваемые элементы в интерфейсы WordPress.