Add a dedicated render method

I understand that this request has been posted and closed here: https://github.com/alyssaxuu/flowy/issues/40

However, I would like to bring it up and present some reasons why I think it will be very useful:

1. In many cases we will need to save the tree in a relational database, only to query and re-build it on demand. Having to store the whole tree in html is not efficient in term of storage.
2. What if we change our design/presentation at some point? It also makes it almost impossible (or very difficult) to change the tree structure via other methods (such as database query) because you will have to somehow re-render the html tree.
3. Right now it seems like the snapping callback is where we can update the presentation of the snapped blocks. I would argue that having a dedicated render method allow us to break free from the need to rely on snap event (and thus also makes adding blocks manually via API possible).

And while we are at it, I would also argue that we should NOT pass the attr together with the blocks (at least not to the render function, because render function only expects the block information and data which can be passed manually). I do understand why we have attr: right now we have the draggable blocks initialized as dom elements which is good but at the same time limited.

We should not mix dom objects with block objects. A block object should have:

1. Id
2. Parent id
3. Name
4. Additional meta data if any

{ "id": 1, "parent": 0, "data": {"name": "blockid", "value": "1" } }

For the html dom based draggable blocks, they can still be coded like this:

<div class="create-flowy" data-id="1" data-parent="0" data-data='{"name": "blockid", "value": "1"}'>Grab me</div>

or perhaps:

<div class="create-flowy" data-id="1" data-parent="0" data-name="blockid" data-value="value">Grab me</div>

One last thing is regarding the current api, perhaps if we switch to this it will be easier to allow easier change in the future:

flowy(canvas, ongrab, onrelease, onsnap, onrearrange, spacing_x, spacing_y);

to

flowy({canvas: element, onGrab: function, onRelease: function, onSnap: function, onRearrange: function, render: function, spacingX: number, spacingY: number});

or (only canvas is a must, all other things are optional)

flowy(canvas, {onGrab: function, onRelease: function, onSnap: function, onRearrange: function, render: function, spacingX: number, spacingY: number});