Menu

How to create an “Drag and drop UI builder”

Tutorials

How to create an “Drag and drop UI builder”

How to create an “Drag and drop UI builder”

Recently, I’ve came across Designmodo’s Generator and I’ve decided to create something similar. Easy way to create a landing page for your startup or whatever else.

All that you have to is drag and drop some blocks and quickly create a prototype for your website.

What this “drag & drop UI builder” is ?

 

Think about this like a puzzle game. You have some blocks and a blank canvas where you can play with the puzzle blocks in order to create what you need.

In this tutorial, the puzzle blocks will consist of few essential user interface components for building an website like headers, contents, price tables, projects/showcases, contacts, teams, footers.

Building the User Interface

 

I’m building it using Twitter Bootstrap framework. Nothing fancy here just a two columns standard layout including a sidebar and a main container area as the main structure.

The only  interesting part here is that we’ll build a nice toggle effect for the sidebar. This is useful because it acts like a “distraction free” mode and gives you a more in depth view of what you’ve built.

We’re not gonna stress about how it looks because this tutorial is not about this. We will focus more on building it. 

Here’s how the markup looks:

 

This is the css:

This is how it looks till now:

Screen Shot 2015-02-21 at 2.23.18 PM

Adding some interactions.

 

Now let’s create the function which will toggle the sidebar:

Now we need to create submenus for each category.

For example when we mouse over “Headers” we should see there some images. The same for the other categories.

In order to achieve this we will use this great plugin called jQuery-menu-aim which is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu’s contents.

Here is a live example of how this works.

I’m not going to show you how to activate this plugin and how to call it because this info is already on the plugin page.

I will implement this code in the existing structure that we’ve built till now.

Great, now we have the main structure and some interactions like showing/hiding the sidebar and displaying some subcategories on mouse over.

Adding the drag and drop functionality for our subcategories.

The next step is to make the subcategories draggable. In our case the subcategories will be images.

Let’s take “Headers” as an example. The subcategories are some  screenshots of different headers. We need to be able to drag these and drop them in the main container area.

For adding this functionality we’ll use jQueryUI more exactly we’ll use interactions from there like draggable, droppable, sortable. For more info about them you can check the API documentation. 

How it will work:

After we drag an element from the sidebar in to the main container it will increase it’s width and height to give us a more realistic feel about what we’re building.

If we drag more than two elements in to the main container then we can sort them inside the container, for example we add an header and two contents, content#1 and content#2 in this exact order but we need also to be able to swap the positions between them.

Also, we need to be able to remove an element from the main container if we want. To do this we will make the sidebar act as a “Trash”. For example if we want to remove content#1 from the main container we need to drag it and drop it over the sidebar area.

Now, let’s create this.

Here’s how the javascript looks like:

That’s all! We have built “Drag and drop UI builder”.

DEMO DOWNLOAD

Tags: , , , , , ,
2 Comments Leave a reply

  1. Olufemi

    Nice Write Up.
    Can you please do a demo of how the HTML is generated.
    I have a feeling it will involve a server side script to build and return it back to view or probably without a server side, having the whole html loaded and processed in a js file.

    Reply
    • Alex Giuseppe Ispas

      Hi Olufemi,
      Yes indeed it requires some server side scripting and some javascript in order to return or some HTML/CSS/JS. I’ve actually thought about doing another tutorial about how to export the code of the selected components. If people will show more interest into this I will do it for sure.

Leave a comment

Your comment(click button to send)

Share

This is a unique website which will require a more modern browser to work!

Please upgrade today!