Back to Top
The nuts and bolts for
Creative web development

Drag & Drop Sortable Lists with JavaScript and CSS (DHTML)

In Web applications [I've] seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each

Then [I] came across Simon Cozens' example of rearranging a list via drag & drop. [I] was so inspired [I] had to try it out [myself].

Update 4/26: tested and working as expected in IE6, Firefox 1.0, and Safari 1.3, unless otherwise noted.

Read the full article

Chris Charlton

Chris CharltonChris, Los Angeles' CSS & ActionScript guru, successfully cannonballed into web development in the late 90's. Always caught up with the latest in Flash, Dreamweaver, Fireworks, and XML, Chris authored premium articles for the largest Dreamweaver/Flash community ( and produced WebDevDesign (iTunes featured), a popular Web Design & Development Podcast. Somewhere, Chris finds time to run an authorized Adobe user group focused around open source and Adobe technologies. Being a big community leader, Chris Charlton remains a resident faculty member of the Rich Media Insitute and lends himself to speak at large industry events, like JobStock, NAB, and FITC Hollywood.

Brain cycles from Chris are always Web Standards, Flash Platform, and accessibility.

See All Postings From Chris Charlton >>

Share this Article