What I am trying to do is to create a position-able layout by dragging and dropping it on the page. If you know how Adobe products’ or Visual Studio’s tool panels can be re-arranged on the screen then you might have a clue on what I am about to demonstrate.
This is initially made for improving jsbin’s code editor layouts but it will be open-source and will be able to get used by any project.
In my experiment I have 5 columns that are divs. Which are laid out like this:
+------+------+------+------+------+
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
+------+------+------+------+------+
I want any of them to be dragged and put below another div and even below two divs like so:
+------+------+------+
| | | |
| | | |
| | | |
| | |======+
|=============| |
| | |
+------+------+------+
I also want them to be resizable on the inner edges so that they can be adjusted to fit any comfortable layout.
There are several approaches I have taken to this.
-
http://jsfiddle.net/weaponxi/Y9cyU/ : I tried placing placeholders that divided each column into four pieces (left half right half and top half bottom half) so that when dragged and dropped they would get half the size of the dropped element (either bottom/top or left/right). It seemed it could have been problematic though, since the placeholders overlapped and wasn’t sure if it would be easy to drop it to the right container… As I was working on this I had another idea that I wanted to try.
-
http://jsfiddle.net/weaponxi/nUMxn/ : I remembered that there was a plugin called ui layout for jQuery. I tried that but saw that it wasn’t efficient enough for the purpose. Not only that I will have to write a drag/drop function for a plugin that has unfamiliar code to me, they can only divide a space into left center and right panels… I quickly moved on to another approach.
-
http://cssdeck.com/labs/3otgmqz5/0 : This one was a shot in the dark. It is another plugin that I found called Gridster for jQuery. It basically gives you a grid that you can move the boxes around. I thought I could add a resize option to make it work (although it would have the whitespace of the grid due to the none-perfect space occupation from re-sizing) It could have worked but it wasn’t acting as it supposed to (I must have done something wrong because it re-sizes only when you quickly shake the box while “re-sizing” or it starts dragging it)
-
This is just an idea that I haven’t tried… Maybe working with tables would be better since I can split a cell easily (in theory). And they will always be adjacent to one another. The only problem could be dragging: When dropped, how would it know if it was going for the left/right or top/bottom ? Those place holders overlap as seen on snippet 1.
What approach should I take when attempting something like this? Are any of these ideas usable? I appreciate all the input.
Take a look at Gridster. There’s a nice example here (http://jsfiddle.net/PrtrR/2/embedded/result/) of a draggable and resizeable layout.
The project is well documented, so you should be able to be up and running in no time.