streamofconsciousness

The ToolMan DHTML library is a dead project and has been since late 2005. As a user of open source software I’m annoyed when I stumble across dead projects that aren’t advertised as such, yet I’ve been reluctant to provide the same courtesy to you.

I’m more than surprised at the longevity of my little library, particularly in the presence of robust libraries like Dojo, JQuery, YUI, GWT, and others.

I have nothing but thanks to everyone who has supported this project through your links, bumps, bug reports and suggestions, bug fixes or patches, or use of my library.

I have special thanks to everyone who made a donation. I’ve removed the donation box from my site and I will tally up the donations received (as best I can) and donate the 50% to Dojo and 50% to JQuery.

A testament to web standards, my library has held up surprisingly well in Safari and Firefox. Internet Explorer, not so much.

I’m leaving my library code and example site up as well as keeping this blog around. Be patient if I don’t moderate your post right away, but I will get to it. My license remains the very permissive MIT license. The code and examples are yours to do with what you want.

Again, thank you for the interest and support.

2 Comments

Mr. K shared with me his write up on my library and examples posted at his site StudioWhiz. In addition to containing some nice ego-inflating compliments, Mr. K also has created his own edit-in-place and drag-and-drop examples linked to from his article.

6 Comments

A new version, version 0.2, of the ToolMan DHTML Library has been released. You can try out the examples (Drag & Drop Sorting, Edit in Place) and download it here.

Here are the Top 5 Reasons to be Excited about Version 0.2:

1. IE support. Most examples have been verified to work properly in IE6.

2. Rewritten from scratch; designed for reuse. The new library is more modular, better packaged, and less likely to have name collisions with your code and other 3rd party libraries.

3. It’s free! Permission granted for personal and commercial use via the liberal MIT license.

4. Improved quality. Cleaner, less duplicated code. Where possible, library modules have unit tests written using Selenium.

5. This is only version 0.2. It just gets better from here.

146 Comments

Update 05/11: version 0.2 of the DHTML Library has a helper function to “serialize” the order of a list:

ToolMan.junkdrawer().serializeList(myList)

It returns a string representation of the list as described in the remainder of this post.

---

Tim Erfle and several others have asked a question like the following:

Is there anyway to report the order of the list after it has been sorted by the user? Its a super cool script, but it would be helpful if store the user modified order in the database.

Because the sorting is done by rearranging elements in the DOM, all you have to do is iterate over the parent element’s children to extract the new order. For example:

function foo(listID) {
    var list = document.getElementById(listID);
    var items = list.getElementsByTagName("li");
    var itemsString = "";
    for (var i = 0; i < items.length; i++) {
        if (itemsString.length > 0) itemsString += ":";
        itemsString += items[i].innerHTML;
    }
    alert(itemsString);
}

To use this in a form submit replace alert(itemsString) with something like myHiddenInput.value = itemsString. Or you could stuff itemsString in a cookie or pass it back to the server with XMLHttpRequest. The above example uses items[i].innerHTML which works fine so long as your list items are plain text. A better approach is to give each LI element a unique identifier. You can use the ID attribute or — if you’re not concerned about valid XHTML — invent a new attribute to use. A list would look something like this:

<ul>
    <li listID="325"><a href="...">Copper</a></li>
    <li listID="27"><a href="...">Gold</a></li>
    <li listID="131"><a href="...">Gold</a></li>
    ...
</ul>

And use a script like this to extract the order:

function foo(listID, formInput) {
    var list = document.getElementById(listID);
    var items = list.getElementsByTagName("li");
    var itemIDs = "";
    for (var i = 0; i < items.length; i++) {
        if (itemIDs.length > 0) itemIDs += ":";
        itemIDs += items[i].getAttribute("listID");
    }
    // do something with itemIDs
}

49 Comments

Ben Levy sent me this demonstration of drag & drop between lists:

I don’t know if you are interested, but I was playing with one of your examples of the drag and drop sortable lists and made some changes to allow dragging between multiple lists. I don’t really know how useful that would be, but it seems to work for the most part.

I think it’s pretty damn useful. I especially like that he highlights the drop targets.

49 Comments

Just received this email from Spurl.net

Your web page:

“Drag-and-drop Sortable Lists with JavaScript and CSS” -

…was #3 on the list of “hot pages” on Spurl.net in week 12, 2005. This means that your page is among the pages deemed most useful or interesting by our user community (currently consisting of about 16,000 users) during the course of this week.

See the list in our archives at:
http ://www.spurl.net/discover/archives/?w=13&y=2005

On a related note, the DnD sortable list example is the #1 result when googling for sortable list javascript drag and drop.

Comment on this

My response to Stuart Langridge’s article “The innovation balance” which cited my Drag & Drop Sortable Lists:

---

I take no offense to the article. To the contrary, it contributed to my 15 minutes of fame. I agree with the reader comments that a technique that doesn’t work in IE is at most an interesting experiment. Which gets right to the original purpose of my Drag & Drop Sortable Lists. It was an interesting experiment. It happened just like this: one day I came across Simon Cozens’ sortable lists. “Neato,” thought I. Followed by, “I could make some improvements…that would be fun.” I did and it was.

Brief history of my personal platform dogma: Windows Bigot, Linux Revolutionary, Linux Refugee/Mac Snob. Where we arrive at today with me still using a Mac. But I’ve settled into a Whatever-Platform-Works-for-You zen comfort zone with occasional bursts of “Nyah nyah, my Apple product works better than your suxx0r wannabe product”. Take anything “iPod” for instance. Anyhow, that my examples currently only work in Safari and Firefox is coincident with me being a Mac guy. A lazy Mac guy even, since my partner’s Toshiba laptop was sitting on the coffee table the entire time I worked on those examples. I’m imagining somewhere in the multiverse another me is typing away on his Windows laptop describing why his DnD Sortable Lists currently only work in Internet Explorer, guiltily looking at his partner’s PowerBook G4 sitting idle…

4 Comments