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

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