LowCodeЭто эффективная и высокопроизводительная платформа разработки с низким кодом и перетаскиванием. Это также направление, которое автор исследует в последнее время. Я написал много статей о плане реализации платформы визуального построения. Здесь я приведет вас к изучению нового направления -Визуальная строительная платформа на основе схемы естественного потока.
достигнуто до насh5-dooringПри создании платформы мы используем метод компоновки сетки для создания перетаскивания.H5页面илиWeb app, преимущество в том, что он гибкий и простой, у пользователя в принципе нет никаких затрат на использование, а также он может делать определенное горизонтальное расширение во внешнем слое, но есть несколько недостатков:
- Реализация вложенных компонентов более сложна
- нет понятия слоев
Хотя проблема слоев и вложенности может быть решена путем преобразования, в последнее время также предпринимаются усилия для достижения этого направления (хотя и вопреки первоначальному замыслу дизайна,Первоначальная цель создания дверей состоит в том, чтобы стереть концепцию слоев и вложенности и сделать здание плоским и интеллектуальным, поэтому свободной схемы планировки не существует.)
Но если должны быть реализованы функции вложенности и слоев, есть ли другое более простое решение?В настоящее время автор думает о двух решениях:
- Измените умную раскладку на свободную, то есть вы можете использовать что-то вроде
react-resizableэта схема - Реализовано на основе естественного потока, то есть стирания концепции позиционирования, полностью на основе порядка элементов в документе, выбор иерархии и позиционирования предоставляется пользователю
Потому что автор первой схемы находится вdooringВерсия была реализована в первые дни, и макет сетки окончательно устарел, поэтому давайте обсудим реализацию второго решения.
Перетащите и отпустите, чтобы создать страницы на основе макета естественного потока
Преимущество макета естественного потока заключается в том, что нам не нужно использовать позиционирование для ограничения положения элементов и другой информации, а нужно размещать элементы по пути потока html-документа, и пользователи могут гибко задавать уровень элементов (layer) и смещение (transform), давайте взглянем на простой эффект реализации.
1. демонстрационный эффект
Из приведенной выше демонстрации видно, что компоновка компонентов на холсте полностью является методом потока документов по умолчанию, поэтому у нас более гибкая реализация компоновки.
2. Идеи реализации
Конкретные идеи реализации в основном делятся на следующие части:
- Перетащите область компонента на холст
- Перетаскивание области холста
- Редактор компонентов и механизм обновления
По первому и третьему пунктам мы находимся вH5-dooringЭто было реализовано в , и если вам интересно, вы можете прочитать мою предыдущую статью, Здесь мы сосредоточимся на реализации перетаскивания в области холста, которая также является относительно основной ссылкой.
2.1 Базовое введение в API перетаскивания H5
перетащите (Dragа такжеdrop)ДаHTML5Стандартный компонент, уже поддерживаемый большинством браузеров Плагин перетаскивания, который мы сейчас используем, в основном основан наH5перетащитьAPIДобиться, собственно, добиться первой точки перетаскивания области компонента на холст, мы можем сделать это нативно, здесь автор вкратце вводит следующее.
Сначала давайте взглянем на полный процесс перетаскивания:
- Первое, что нужно сделать, это сделать элемент перетаскиваемым (например,
<img draggable="true" />) - Спроектируйте, что происходит, когда вы перетаскиваете (необходимо использовать
ondragstartсобытие иsetData(你要传递的数据)) - Куда его поместить, то есть целевой контейнер (обычно привязанный к целевому контейнеру
ondragoverа такжеondropмероприятие)
С помощью вышеуказанных 3 шагов мы можем выполнить первое требование.Автор пишет простую демонстрацию для вашей справки:
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
let data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag" src="dooring.png" draggable="true" ondragstart="drag(event)" width="336" height="69" />
То есть соответствующая область перетаскивания наших компонентов, как показано на следующем рисунке:
2.2 Реализация макета перетаскивания в области холста
Поскольку в предыдущей версии мы использовали макет сетки для реализации интеллектуального перетаскивания, поскольку внутренний механизм позиционирования использовал абсолютное позиционирование (absolute), поэтому сложнее реализовать иерархические и фиксированные компоненты. Если представление компонентов полностью выходит за рамки ограничений позиционирования, мы можем решить вышеуказанную дилемму. Итак, здесь мы ищем решение -Механизм сортировки с помощью перетаскивания.
Закон компоновки естественного потока заключается в том, что по умолчаниюhtmlстраница основана наdomПорядок появления устроен, что мы называем укладкой.
Мы можем следовать этому дизайну,Измените положение компонентов путем сортировки, чтобы добиться естественного макета страницы..
Затем вернемся к проблеме компоновки, упомянутой выше.Например, чтобы получить сеточную компоновку, нам нужно только определитьflexКонтейнер, просто перетащите компонент в контейнер, что решает проблему вложенности.В то же время мы также можем спроектировать номер сетки вложенного контейнера, чтобы можно было достичь следующих эффектов:
Библиотека сортировки перетаскиванием, которую мы можем использовать:
- sortable
- Vue.Draggable
- react-dnd
Есть много отличных библиотек, поэтому я не буду перечислять их все здесь.
3. Как реализовать иерархию и вложенность
По сути, в приведенных выше идеях реализации мы решили проблему вложенности, то есть предоставить компонент-контейнер для перетаскивания и использовать перетаскивание, введенное автором выше.apiЭто может быть достигнуто. На уровне компонентов, поскольку мы используем компоновку естественного потока, мы можем легко установить свойства позиционирования элемента. Например, мы предоставляем настройку позиционирования:
О том, как спроектировать редактор динамических свойств, автор также подробно рассказал в предыдущей статье, вы можете обратиться к:
Вышеприведенное является базовой реализацией компоновки естественного потока, и автор такжеgithubСинхронизируйте наши последние результаты.
H5-Dooringредакторwiki: GitHub.com/Mr X U соус/Также…
наконец
найти его полезным? Любимый, если хотите, кстатиотличныйЧто ж, ваша поддержка - моя самая большая поддержка! Поиск в WeChat »Интересный разговор о фронтенде», откройте для себя больше интересных игр H5, webpack, node, gulp, css3, javascript, nodeJS, визуализацию данных Canvas и другие знания о интерфейсе и реальных боях.