JS option sort

— Topic: javascript

Update: Instead of using this example, I would recommend using Cody Lindley's solution instead. It derives from the same school of thought, but is a better overall implementation.

Check it out: List/Sort Pattern for Everyone.

Option Sort: Example | Download (4 KB)

Recently I had need to present a few rapid prototypes of various ways to categorize data into one of two columns, as well as re-order items within the columns themselves. The solution that ended up being picked was a jQuery drag-and-drop one. Personally, I think that type of thing is pretty horrid, because it cannot be operated with a keyboard, and it assumes that you have the manual dexterity to use a mouse. Plus, if you are sorting through a lengthy list, it can be bothersome to only move one item at a time.

Anyway, all that to say that I had built this other possible solution and don't want to let it go to waste, so I'm presenting it here in hopes that it serves as a good starting point for someone looking to solve a similar problem. First off, I need to thank Paul Welter for initially making the JavaScript code available for free on his own site. That being said, I slightly adapted it to make it work with XHTML 1.0 Strict, dumping the table in favor of a CSS based layout.

I also rewrote some of the JavaScript itself, to make it play nicer with Douglas Crawford's JSlint JavaScript verifier. There were just a few unclosed and empty logical statements. I mainly changed the way that Array() and Object() were created, using array and object literal notation instead. JSlint tends to favor that as opposed to delcaring using the new keyword…

var fooBar = {};

// vs:

var fooBar = new Object();

Anyway, it doesn't make a whole lot of difference in how the script actually works, but can be thought of as using shorthand in CSS. You do it not because it has a huge immediate impact, but the filesize saved by using best practices adds up over time. One thing I did leave in despite JSlint's warnings is the use of i as a non-global variable name in multiple incrimented counters. It's common practice for JavaScript and I see no harm in it…

for (var i = 0; i < fooBar.length; i++)

I chalk those instances up to being comparable with the CSS validator's nonsensical warnings: "You have no background-color with your color." I also included a message that appears when JavaScript is off, letting people know that they need to enable it. I have started using <ins> within <noscript> since content is technically "inserted" when JS is unavailable. It's one of the tags suggested by the validator for XHTML 1.0 Strict, so it must be good.

So yeah, I guess that's about all there is to it. I have tested this demo in the following browsers, and it works just fine: IE6 and 7, Safari, Camino - plus Opera and Firefox on Windows / Mac. Hopefully it proves useful to you.

Me, elsewhere