Eklog

These are good books:

DOM-Drag is a dragging API for modern DHTML browsers. It allows users to move elements of a page. The movement can be unrestricted, or constrained to a area, such as an ordered list. The same functionality has also been developed using PHP. It’s a great way to add some dynamics to otherwise static HTML/CSS layouts.

There’s a fantastic application from Tim at ToolMan.org. It lets visitors rearrange the position of an item in a list, and if the elements contain text they can a edit the titles as they see fit. It could be a navigation menu or a bunch of MP3s.

I’ve created an adjustable site link list you can play with in this site - it’s here: drag-sort site link list. It has the cookie script working so the items stay in place when you return to the site.

The examples on the Toolman site for sorting and edit in place don’t store the order in a cookie. After advice from The (very kind) Tool Man, I got cookies working on the ’sorting in two dimensions’ by adding a unique ID to each list item. The cookie script is from Quirksmode.org. Cookies are a necessity, as most applications are only useful if a user can keep the chosen order when returning to the page.

There are a number of alternative approaches to drop-drag lists. Youngpup has a site with useful tutorials and examples. He also uses DOM JavaScript. Neb.net is an example of dragging between two lists using PHP. The first application that comes to mind is allowing visitors to move their preferred links from a main menu to a ‘quick links’ or ‘favourites’ menu. Scriptaculous drag-drop cart has a drag-drop shopping cart. Looks great and really easy to use. Cyberdummy drag-drop cart has created a version using PHP. Cyberdummy also demonstrates a PHP drag-drop version where you can save the order using a database.

There’s number of useful DOM-drag-drop-DHTML links listed in the DOM-drag JavaScript scripts section.