exscale.se

aFramework drag n drop admin

Published Wednesday, August 27, 2008 in aFramework, Development

I've been working hard all night coding a drag n drop admin for aFramework. It allows you to add and remove modules to the page you are currently at.

Just like every other admin in aFramework this one is run directly on the site. You just log in and that allows you to customize the page as well as eventually add and remove articles etc (this is already possible in v2, just have to convert it to v3).

Update

aFramework v3 requires PHP 5.3 to work, something my host does not offer (yet, it's only in beta) but I've set up a static example of the drag-n-drop admin so you can at least get a feel for how it works.

After adding a module it will never stop loading. This is where aFramework would actually run and render the module using AJAX. Since this is just a hard-coded version in pure HTML, CSS and JS the AJAX:ing won't work.

You can try disabling JS if you like - it works without as well. You won't be able to either add nor remove modules without JS in the static version though (for the same reasons as the AJAX-calls don't work).

Ok, check it out!

til

Thursday, September 11, 2008 | View all comments by til

I should be working on something similar and stumbled on your demo by accident.

It has a very good feel IMO, and the dotted line of the drop target looks very nice.

I also like that the shadowed element is being dragged, and that nothing in the drop area is being pushed around while hovering over it.

It wasn't immediately clear to me though how to drag something between two boxes versus dragging something onto a box (which would replace the contents of the previous box?). I think that the drop target indicator to drop something between two boxes should be a dotted line between the boxes, not the top border of the lower box. That would also solve the uncertainty of how one has to move the mouse when dragging to switch from between-two-boxes and on-one-box targets. Right now that seems to depend only on the speed of the vertical mouse movement. Such an in between drop target indicator line could also appear above the top and below the bottom box, removing the need to make the container box a drop target.

I realize that this change would require some non-trivial work ... but hey, you posted it, so here's some feedback.

Andreas

Friday, September 12, 2008 | View all comments by Andreas

@til - Thanks for great feedback.

If you've switched off JS you'll have noticed that what you can actually do is either add a module to another module or insert a module before another module.

I tried to replicate this behaviour in JS as well. If you drag a module on-top of another starting from the top it will be inserted before that module.

If you start from the bottom it will be added to the module.

In both cases the same module is the droppable but I check where the draggable is positioned to know whether I should add or insert before.

But because the same module is always the droppable I can only style that module. That's why, on add, there's a border around and on insert before there's a border on top.

I should really work on calculating the position on every mouse-move - now it only occurs onmouseover of the droppable. So if you start from the top but drag it inside afterwords it will unfortunately not change from insert before to add.

Hope that made a little sense at least..

Love your site btw, left a comment :)

til

Friday, September 12, 2008 | View all comments by til

Ok, tried with js switched off, makes sense to me now.

I still believe that ideally, the hover indicator for dropping something before (or between, or below) modules should not be the top border of an existing module but a stand alone dotted line surrounded by white space, but it would require adding some dummy elements only for that purpose and propably non-trivial manipulation of the drag and drop code.

For an admin interface it's certainly acceptable to ask the users for the few fractions of a second to get used to that behaviour - once that is learned it's a perfectly usable and pleasing interface.

Maybe one day I'll be able to finish my demo, which will have dotted lines and the shadow drag element inspired by the aFramework demo.

Congrats to making a comment on tils.net btw., not many manage to post there ;)

Andreas

Friday, September 12, 2008 | View all comments by Andreas

If you look at the screenshot in the article you'll see that I actually did use a "ghost"-element at first.

The problem with this was that I added the ghost-element when the droppable reacted to a draggable, but if you then dropped the draggable (released the mouse) it would no longer be on top of the droppable but on top of the ghost-element.

I couldn't find a good way to solve it so I just removed the ghost-element.

Edit: I've thought about a solution though and I might re-add the ghost. I reckon it really helps the user understand what will happen when he drops the module.