I had been looking for easy to use modules that support dynamic drag and drop of blocks, without requiring the user to do any sort of fancy setup, etc. I needed something similar to the Google homepage sort of feel that allows users to customize the site immediately upon logging in.
I searched for various modules and although I did like the MySite module, it was ultimately too sophisticated for our user base. To put it in simple terms, I needed something that provided drag and drop and sort for blocks, and users could do this on any page just by dragging the actual blocks around. It also needed to be persistent and remember the user set positions of blocks across page refreshes and sessions, and if possible support moving blocks from group to group.
Enter docking boxes. I had used the script before for some minor things and I liked it due to its simplicity and emphasis on using CSS framework. It also provides a nice sorting animation, is keyboard accessible and remembers the position of element boxes (blocks) using a cookie.
The script allows you to setup an unlimited number of drag and drop groups on either a horizontal or vertical axis and allows you to drag and drop elements within groups, but does not have a provision for moving boxes to other groups.
Installation of the script was simple and self-explanatory. I simply referenced the script within my page.tpl, added the CSS framework to my style sheet and overloaded my theme’s already defined block styles. When I refreshed the page, I could drag and drop blocks on either side of my theme’s three column layout.
block.tpl.php overloaded dbx styles:
<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="block block-<?php print $block->module ?> dbx-box">
<div class="block-inner">
<h2 class="title dbx-handle"> <?php print $block->subject; ?> </h2>
<div class="content dbx-content">
<?php print $block->content; ?>
</div>
</div>
</div>Using this principle, it should be easy to add this script and capability to any Drupal theme. Kudos to James Edwards of brothercake for creating a great script.
I would post a link to my implementation, but its on a corporate intranet which is not publicly accessible. I just thought I would share this with others as its such a simple and effective method for easy drag and drop on most any theme.
Comments
MySite
Can you elaborate on this a bit?
"I searched for various modules and although I did like the MySite module, it was ultimately too sophisticated for our user base."
I agree that Brothercake is cool stuff, btw. The MySite module could use some JS developer love.....
--
http://ken.blufftontoday.com/
http://new.savannahnow.com/user/2
Search first, ask good questions later.
--
http://ken.therickards.com
Thanks for writing this
I'd like to see this post expanded and put in the handbook. It's not a showcase item unless there's a demo. :)
Some more examples would be great, too. For example, the blocks are immovable without the
dbx-groupbit. I spent about half an hour trying this before I realized the code above was missing several classes.What is the
block-innerclass about?subscribing any working
subscribing
any working example of this?
Demo with Drupal
You can find a demo and step by step instructions on getting this to work with drupal at http://www.hyrme.com/node/8
Oh my goodness!
That's utterly beautiful! I had been idly wanting to do something like this for the past three years to but never found the time to figure out how do it! And your docking boxes are far better than anything I'd have come up with anyway! Fantastic, thank you. Can't wait to find some free time to explore this...