Drag and Drop Blocks to Rearrange them

php, perl, themes, drupal development services

Search

// index

hyrme.com

Drag and Drop Blocks to Rearrange them

Here is an easy way to let your user's rearrange the displayed blocks on your website. These changes are client side only and will not change your actual layout. The layout gets saved as a cookie on the user's computer so unless they clear cookies they get the same view of your site each time they visit.

I used the Docking boxes (dbx) library and integrated it into the garland theme. It should be possible to modularize this and make it theme independent - but that would be step 2.

See a demo here. All the blocks on the left sidebar can be rearranged. Use the title to drag.

Here is how you can make it work on your site:

1. Download the files from here.

2. Copy the dbx.js, dbx.css to your theme folder.

3. Edit the page.tpl.php file to add the following lines in the head section there

 <script type="text/javascript" src="<?php print base_path() . path_to_theme()?>/dbx.js"></script>
<link rel="stylesheet" type="text/css" href="<?php print base_path() . path_to_theme()?>/dbx.css" media="screen, projection" />
<script>
$(document).ready(function() {
//Initialize the dbx engine
var manager = new dbxManager('main');

//Configure your left sidebar to allow drag drop
var dbg = new dbxGroup('sidebar-left', 'vertical', '7', 'yes', 'yes', 'open', 'open', 'collapse', 'click-down and drag to move this box', 'click to %toggle% this box', 'use the arrow keys to move this box', ' or press the enter key to %toggle% it', '%mytitle%');
)}
</script>

4. Edit your block.tpl.php and add a new class called "dbx-box" to the main div so it will look like this when you are done.

<div id="block-<?php print $block->module .'-'. $block->delta; ?>" class="clear-block block block-<?php print $block->module ?> dbx-box">

Notice the "dbx-box" in the class attribute at the end of the tag.

Add a new class "dbx-handle" to the title to make it the draggable handle as:

<h2 class="dbx-handle"><?php print $block->subject ?></h2>

You should be ready to go now. If you are feeling a overwhelmed you can just download my files here and use them with your garland theme. Unzip the files into your garland theme folder.

Contact me for help or if you would like a quote on any custom projects you have that may benefit from drag and drop functionality.