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)
3 Answers
Answers 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
Answers 2
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.
Answers 3
Well, 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); 
0 comments:
Post a Comment