zanshin.net

Nov 12th, 2008 by mark

Once upon a time, a long time ago, there was a website called mydogmeg. One of the features was a sub-domain filled with links to technical sites. The layout was simple and effective, and when mydogmeg went off the air I grabbed a copy of the geek sub-domain from the Internet Archives. For a long time I did nothing with the page, but last year after moving to a new host I created my own geek sub-domain, and put a modified version up on my site.

While the layout is pleasing to me, I’ve always wanted to add drag-and-drop functionality to the blocks of links, something like the iGoogle home page where moving one widget causes the others to get out of the way. Thanks to a tip from JJ, I’ve updated the page using jQuery to do just that. You can go play with geek.zanshin.net to see for yourself. Click inside any of the boxes on the screen and drag to relocate.

jQuery Script

I used two jQuery libraries to add the drag-and-drop functionality I wanted. The base jQuery library and the jQuery ui library. The feature that I wanted is called ’sortable’ and it works against unordered lists. My page has four columns, called from left to right: left, leftCenter, rightCenter, and right. Using these ids the script looks like this:

/*
 * geekjs.js 0.1
 * Copyright (c) 2008 Mark Nichols (zanshin.net)
 * 11 november 2008
 */
$(document).ready(function(){
 
// enable sortable on all columns
// this will add drag-and-drop functionality as well
$("#left").sortable({
	connectWith: ["#leftCenter","#rightCenter","#right"]
});
$("#leftCenter").sortable({
	connectWith: ["#left","rightCenter","#right"]
});
$("#rightCenter").sortable({
	connectWith: ["#left","#leftCenter","#right"]
});
$("#right").sortable({
	connectWith: ["#left","#leftCenter","rightCenter"]
});
});

Basically this script does two things. First is makes each named column sortable, allowing for drag-and-drop functionality, and causing the list items to “scoot” out of the way when the dragged item is dropped. Second it connects each column with the other columns, allowing dragging between the columns.

Unordered Lists

The HTML and CSS for the page implement each column as an unordered list. The bullet is suppressed, and the indent eliminated to save horizontal space. Each column is named through an ‘id’ tag, and each block of links is also named. Rather than repeat the source here I’ll let the curious among you view the page source to see how the lists are constructed.

With the page constructed, and the jQuery script in place it just works. Of course, the page has no persistence so any arrangement you make will be lost the next time you load the page. My next project will be to add a cookie so that your page arrangement will be saved from one visit to the next.

Tags: javascript, jquery, this site

Posted in nerdliness

5 Responses to “Using jQuery to Create iGoogle Style Drag-and-Drop”

on 14 Nov 2008 at 6:16 am1Brett

My God, you are either the king of kings, or I’m falling behind on my jQuery plugins. I’m just going to go with you being the king of kings. That really is awesome. I use igoogle and I thought they were king of kings for this feature. Thanks a ton. I’m trying to work my way over to using jQuery UI but I still giggle every time I use fadeIn slow! I’ve bookmarked this so now you have to keep it here!
on 14 Nov 2008 at 8:19 am2mark

@brett – You are too kind. I actually had never looked at jQuery until the day before I posted this script. Having a well written and documented framework is worth its weight in gold.

The iGoogle-esque drag-and-drop is very nice but now I need to persist the new page ordering. I am leaning toward a OPML style XML structure to store the links and their groups, with a persistent cookie to keep each visitor’s ordering from session to session. Eventually I’d like to have a small UI (perhaps Ruby on Rails) to allow people to add their own links.
on 21 Nov 2008 at 4:33 am3sreevidya

Hi can u please provide the complete downloadable script which will be more helpful.
on 21 Nov 2008 at 8:07 am4mark

@sreevidya – That is the complete script. Short and simple. If you do a view page source on geek.zanshin.net, you will see how I named the unordered lists it acts upon. Or you can look at the jQuery tutorial example I followed, http://dev.jquery.com/view/tags/ui/latest/demos/functional/#ui.sortable.
on 09 Dec 2009 at 3:17 pm5zanshin.net » 50,000 » Blog Archive

[...] to” genre. The most popular posting is Installing PostgreSQL on Mac 10.6, closely followed by Using jQuery to Create an iGoogle Style Drag-and-Drop. These type of postings are fun to create, and since they attract visitors I’m planning on [...]