LowCode is an efficient, high-performance drag-and-drop low-code development platform. It is also the direction that the author has been studying recently. The author has written many articles on the implementation scheme of visual building platform before. Here, WE will explore a new direction — visual building platform based on natural flow layout.

In our previous H5-Dooring building platform, we adopted the grid layout method to achieve the drag-and-drop generation of H5 pages or Web apps. The benefits are flexible and simple, users basically have no use cost, and horizontal expansion can also be done in the front layer, but there are several drawbacks:

  • Implementing nested components is complicated
  • There is no concept of layers

Although the problem of layers and nesting can be realized through retrofitting, recent efforts have been made in this direction (although contrary to the original design,Dooring’s original intention was to erase the concept of layers and nesting and make building flat and intelligent, so no free-layout solution was adopted)

But if nesting and layering are essential, is there another, simpler solution? I have two solutions in mind:

  • Change the smart layout to free layout, that is, you can use similarreact-resizableThis scheme of
  • The implementation is based on natural flow, which eliminates the concept of positioning and leaves the choice of the order, hierarchy and positioning of elements in the document entirely up to the user

Since I implemented the first one early in Dooring’s life and abandoned it in favor of a grid layout, let’s look at the implementation of the second one.

Based on natural flow layout to achieve drag and drop generated pages

The advantage of natural flow layout is that instead of limiting the location of elements by positioning, elements are laid out as HTML document flow, and the user has the flexibility to set the layer and transform of elements. Let’s look at a simple implementation.

1. The effect of the demo

From the demo above we can see that the layout of the components in the canvas is completely the default document flow way, so we have a more flexible layout implementation.

2. Implementation ideas

The specific implementation ideas are mainly divided into the following parts:

  • Component area drag onto the canvas
  • Drag canvas area
  • Component editor and update mechanism

The first and third points have already been implemented in H5-Dooring. If you are interested in my previous article, we will focus on the implementation of canvas drag and drop, which is also the core part.

2.1 H5 Drag and drop API

Drag and drop (Drag and drop) are part of the HTML5 standard and have long been supported by most browsers. We are using the drag and drop plug-in basically based on the H5 drag and drop API to achieve, in fact, the first component area drag and drop to the canvas we can use native to achieve, here the author simply to introduce the following.

First let’s look at a full drag and drop process:

  1. First set an element to be drag-and-drop (e.g<img draggable="true" />)
  2. What happens when you design a dragondragstartEvents andSetData (the data you want to pass))
  3. Where to put it, that is, in the target containerondragoverandondropEvents)

With the above three steps, we can achieve the first point of demand, the author wrote a simple demo to give you a reference:

<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" />
Copy the code

This corresponds to our component drag and drop area, as shown below:

2.2 Drag-and-drop layout of the canvas area

Because of the previous version we used grid layout to achieve intelligent drag and drop, because the internal positioning mechanism is absolute (absolute), so it is difficult to achieve hierarchy and fixed components, if the components are completely out of the constraints of positioning, we can achieve the above dilemma. So here we investigate a solution — a drag-and-drop sorting mechanism.

The law of natural flow layout is the defaulthtmlThe page is based ondomThe order in which they appear, which is what we call stacking.

We can follow this design by changing the location of components in a sequential way to achieve a natural flow layout of the page.

Let’s go back to the layout problem. For example, to implement a rasterized layout, all you need to do is define a Flex container and drag and drop components into the container. This solves the nesting problem. We can also design the number of grids for the nested containers so that we can achieve something like this:

Drag sort libraries we can use:

  • sortable
  • Vue.Draggable
  • react-dnd

There are many excellent libraries out there, and I won’t give you any examples here.

3. How to implement hierarchy and nesting

In fact, we have solved the nesting problem by providing drag-and-drop container components, using the drag-and-drop method I described aboveapiFor the component level, since we are using a natural flow layout, we can easily set the location attribute of the element. For example, we provide a location setting:

On how to design a dynamic attribute editor, the author’s previous article on the detailed introduction, you can refer to:

  • FormEditor implementation (FormEditor)

That’s the basic implementation of natural flow layout, and I’ll keep you posted on Github with the latest results.

H5-Dooring Editor wiki: github.com/MrXujiang/h…

The last

Find it useful? Like the collection, by the way, click like it, your support is my biggest encouragement! Wechat search “interesting talk front end”, found more interesting H5 games, Webpack, node, gulp, CSS3, javascript, nodeJS, Canvas data visualization front-end knowledge and practical.