Вопрос или проблема
Прежде всего, это НЕ дублирует все те другие вопросы, пытающиеся реализовать перетаскивание для SVG, и отвечающие сообщают им, что это невозможно – как-то этот код, который я читаю, УЖЕ это сделал, и я не могу понять, как.
Я работаю над проектом под названием react-hexgrid. Это библиотека, которая использует различные функции для рисования шестигранников с помощью SVG. Библиотека содержит код для перетаскивания, но я не вполне уверен, как его использовать.
В этом примере используется устаревший синтаксис классов…extends react для реализации перетаскивания, а также библиотека под названием “react-scripts.” Вы можете увидеть некоторые реализации свойств/функций перетаскивания здесь. Если вы клонируете, устанавливаете и запускаете этот пример, вы увидите, что перетаскивание действительно работает.
Тем не менее, я пытался написать что-то подобное:
<HexGrid width="100%" height="100%">
<Layout>
{/* перетаскивайте цвета! */}
{/* источник перетаскивания */}
<Hexagon q={0} r={0} s={0} style={{ fill: "red" }}
onDrop={() => {console.log("перетаскивание")}}
onDragStart={() => {console.log("перетаскивание")}}
onDrag={() => {console.log("перетаскивание")}}
>
</Hexagon>
</Layout>
</HexGrid>
Этот код НЕ работает, независимо от того, как сильно я кликаю, навожу мышь или перетаскиваю какие-либо из элементов. Я не понимаю, почему это не срабатывает, но старый код, связанный выше, работает. Есть идеи?
Ответ или решение
Чтобы объяснить, как компонентная библиотека React может использовать перетаскивание (drag and drop) на элементах SVG, стоит обратить внимание на реализации, используемые в библиотеке react-hexgrid, и на графику SVG.
1. Использование событий перетаскивания в React
Для того чтобы перетаскивание работало с компонентами, необходимо правильно использовать обработчики событий. Ваша реализация кода не срабатывает, так как события могут быть неправильно связаны или не активированы. Важно убедиться, что обработчики событий onDragStart, onDrag, и onDrop правильно настроены.
2. Пример полной реализации
Вот пример того, как можно реализовать перетаскивание в Hexagon, используя обработчики событий:
import React from 'react';
import { HexGrid, Layout, Hexagon } from 'react-hexgrid';
const MyHexGrid = () => {
const handleDragStart = (e) => {
e.dataTransfer.setData("text/plain", e.target.id); // Устанавливаем данные для перетаскивания
console.log("Drag started");
}
const handleDrop = (e) => {
e.preventDefault(); // Необходимо предотвратить действие по умолчанию
const id = e.dataTransfer.getData("text/plain"); // Получаем данные из перетаскивания
console.log("Dropped item with id:", id);
}
const handleDragOver = (e) => {
e.preventDefault(); // Позволяем элементу принимать событие drop
}
return (
<HexGrid width="100%" height="100%">
<Layout>
<Hexagon
id="hex-1"
q={0}
r={0}
s={0}
style={{ fill: "red" }}
onDragStart={handleDragStart}
onDrop={handleDrop}
onDragOver={handleDragOver}
draggable="true" // Не забывайте добавлять атрибут draggable
/>
<Hexagon
id="hex-2"
q={1}
r={0}
s={-1}
style={{ fill: "blue" }}
onDragStart={handleDragStart}
onDrop={handleDrop}
onDragOver={handleDragOver}
draggable="true"
/>
</Layout>
</HexGrid>
);
};
export default MyHexGrid;3. Пояснения к коду
- draggable="true": Этот атрибут делает элемент перетаскиваемым. Без него события перетаскивания не будут исполняться.
- setData и getData: Метод
setDataпозволяет передавать данные при перетаскивании, аgetDataпозволяет их извлечь в момент "броска" (drop). - preventDefault: Этот метод необходим для предотвращения стандартных действий браузера при перетаскивании.
4. Заключение
Следуя предложенному примеру, вы сможете реализовать функционал перетаскивания на ваших элементах SVG с использованием библиотеки react-hexgrid. Убедитесь, что все обработчики событий правильно связаны, и не забывайте добавлять атрибут draggable к элементам, которые вы хотите перетаскивать. Это должно решить вашу проблему.