javascript drag and drop page builder

Question

I'm in the process of building an A4 size drag and drop page builder. The elements this builder can contain are images and text boxes.

I am after for some advice on what frameworks are available that can be used to build this type of front-end functionality.

Example of what I'm after, see here canva.com

The two frameworks I tried are so far are fabric js and greensock draggable, which didn’t meet my needs or are pretty difficult to create a complete page builder.

ideally i don't want to use canvas for this.

edit: Basic Feature:

• cropping
• rotation
• re-sizing
• change font style/color/size for textboxes
• add backgrounds
• frames/ masking images (square image can become star shape with a overlay)

Answer 1

Most of your goals can be achieved by css 2/3 + some pure js

clipping/masking

http://www.html5rocks.com/en/tutorials/masking/adobe/

re-sizing, change font style/color/size for textboxes, add backgrounds

pure js/css2

rotation

css3 transform property http://www.w3schools.com/cssref/css3_pr_transform.asp

dragging

Can be pretty easily done, using pure js or you can try some open-source plugins, or something like jquery draggable.

As for your current list, I don't actually see, why do you want some framework for this, when most of it can be achieved by pure js/css with a little effort/googling.

In my humble opininon, jquery or something similar is all you really need. Just check jquery's "interactions" section here https://jqueryui.com/draggable/ to see if it can help you with building your builder interface. There are various examples for each interaction (right sidebar).

UPD: Here is some dirty code example for you (using jquery UI) http://jsfiddle.net/tbpxnxrm/2/. Doubleclick in #main to create additional elements. No collision/overlapping checks implemented, forked from http://jsfiddle.net/4Vfm5/1095/

drag_defaults = {grid: [50,50], containment: "parent"};
resize_defaults = {
    aspectRatio: true,
    handles: 'ne, se, sw, nw',
    grid: [50,50],
    minHeight: 50,
    minWidth: 50
}

$('.draggable').draggable(drag_defaults);
$('.resizable').resizable(resize_defaults);

UPD2: After a couple of years my example stopped working at all on jsfiddle. Can't surely tell why, yet the main answer is still credible.

Answer 2

As of my understanding you want to create dashboard which can be configurable. I would suggest use a table structure Table merge and split in which each cell should have a dropable component like

<table id="mainTable">
                    <tbody>
                        <tr>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                        </tr>
                        <tr>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                            <td class="set-as-droppable"></td>
                        </tr>
                    </tbody>
                </table>

Like

Then on drop write your own logic

$( ".set-as-droppable" ).droppable({
        accept: "div.Dragable",
        drop: function( event, ui ) {

}
}); 

And dragable component can be TEXT or IMAGE and on drop you can give any operation

Answer 3

I tried to implement this in my free time but its not something that can be done from the ground up using pure js in a couple of after hours. So far I have a jQuery plugin prototype for dropping new dom elements into a page area. I've also been experimenting with making any block component in a page resizable. In the few hours I put into it I had some success.

Resizable block component: (Edit: drag the 4 small handles in the middle of the sides)

Fiddle

Page builder prototype with menu and droppable area (Only the text item can be dropped):

Fiddle

I'll keep updating the fiddles whenever I get to work on it, but I won't have a finished plugin anytime soon.

Too much code to put here! Visit the fiddle

Answer 4

There is a useful jquery plugin for rotation.. Your code:

<div id="product">

<img src="images/01.jpg" />

<img src="images/02.jpg" />

<img src="images/03.jpg" />

<img src="images/04.jpg" />

<img src="images/05.jpg" />

</div>
<script type="text/javascript">

jQuery(document).ready(function() {

    jQuery('#product').j360();

});

</script>

This should work.

Answer 5

I think you can't do this with only one framework if your goal is to make it as easy as possible.

If I understand well, what you want to do is to allow your app' user to make some kind of advanced "drawing" made directly in the browser.

First : Without canvas element, their works will have to be exported/generated server-side.

Now, the best way to do this would be to have a javascript object that represents each document and their content, with models included and each properties like position, rotation described. And this object should be rendered making css properties and html elements correspond to the object structure. That is to say AngularJS would be my first choice as it watches almost automatically your models and render the target element in real time as soon as your object is modified. (Angular 2 is better but only documented in TypeScript and Dart)

From here, with html5 & css3, elements can be manipulated with a nice property : transform. It takes values like "translateX(10px)" or "rotateZ(10deg)". To learn more about it : http://www.w3schools.com/cssref/css3_pr_transform.asp.

Also, for the drag and drop things : http://www.w3schools.com/html/html5_draganddrop.asp.

To crop an image, you should use server-side code. (example with php : http://php.net/manual/fr/function.imagecrop.php)

To play with masks on images, there are also css3 properties that work well : http://www.w3schools.com/cssref/pr_pos_clip.asp

And for communication between your app and the server, use jQuery functions : http://api.jquery.com/category/ajax/.

Finally, pick what you want from css3 : http://www.w3schools.com/css/css3_intro.asp. http://www.w3schools.com/css/css3_images.asp

I hope it'll help you. Good luck !

UPDATE : I found that clip css property is obsolete, now it's clip-path but it works approximatively the same way.

UPDATE 2 : Actually, masks (with images and not paths) can be made through mask css property : https://developer.mozilla.org/en-US/docs/Web/CSS/mask. But be careful, it's still partially supported http://caniuse.com/#search=mask.