В последние дни спрос на кодовые платформы не рос. Таким образом, началось мое исследование создания визуального редактора.
Цели:
Пользователи смогут перетаскивать компоненты материала из левого ящика в зону сброса (средний/пользовательский макет) и использовать набор инструментов на правом ящике для редактирования CSS отдельных компонентов в зоне сброса. Экспорт структуры данных json для различных целей устройства. Кроме того, возможно, станет библиотекой для людей, которые хотят создавать платформы без кода. Для тех, кто не разбирается в технических вопросах, перейдите к демоверсии, чтобы попробовать ее, или посмотрите вступительное видео. :)
Вехи:
Для визуального редактирования с помощью компонентов: кнопок, контейнера сетки, элемента сетки и типографики. Бумага, кнопки со значками, значки материалов, компоненты Accordion, Divider и ImageList будут чрезмерным достижением.
Чтобы увидеть, как этот проект растет:
Присоединяйтесь к нам и сотрудничайте, подписывайтесь на меня, аплодируйте и делитесь этой статьей.
OR
Пожертвуйте нам по адресу:
|USDT|BSCNetwork|0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1
|BNB|BSCNetwork|0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1
|ETH|ETHNetwork|0x81C2A19Ab37A48EB435CFe75c1ba42E3070517B1
Этап 1. Необходимые основные понятия
- Перетащите для документа:
// code to handle drag start:
// ev is the event parameter
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML);
// code to handle drop:
ev.preventDefault();
ev.stopPropagation(); // this prevents propagating events up to the target's parents something critical
let html = ev.dataTransfer.getData("text/html");
ev.currentTarget.style.border = "none";
let text = ev.dataTransfer.getData("text/plain");
let element = document.getElementById(text)
let element_prime = element.cloneNode(true)
ev.currentTarget.append(element_prime)
Однако приведенное выше НЕ является способом ведения дел React. И нам пришлось бы использовать преобразования xml, которые являются «потерянными» и сложными.
Этап 2: Знакомство с .. Redux + React-DnD
React-Dnd также использует Flux Flow, как и Redux. Что мы хотим сделать сейчас, так это использовать React-DnD и Redux Global Store, чтобы сохранить наше JSON-дерево иерархий компонентов. Впоследствии мы можем просто использовать эту структуру данных для рекурсивного рендеринга компонентов в зоне сброса.
ПРИМЕЧАНИЕ. Нам придется отделить компоненты, которые используются для перетаскивания, из списка компонентов и те, которые уже рендерятся в зону перетаскивания,они ведут себя по-разному.
Я не буду повторять документы React-DnD в этой статье, но вот список функций, которые используются в проекте: useDrag, canDrag, isOver, isDragging, useDrop, canDrop
Что-то, что стоит упомянуть, это параметр «неглубокий» для isOver, который позволил мне выделить целевой компонент вместо каждого родителя, связанного с компонентом.
monitor.isOver({ shallow: true })
Результаты этапа 2:
