AJAX and PHP

AJAX Drag and Drop
A few websites have already put this into practice. One such example is Panic Goods—selling
t-shirts! The URL for this is: http://www.panic.com/goods.
Notice the light blue bar on the bottom of the screen? That's the actual shopping cart. Just drag
some t-shirts from the catalog, and drop them into the shopping cart, to see how the cart performs.
Products are lined up in the cart and it's easy to see what you have chosen and for what amount.
Drag items outside the light blue bar to remove them from the cart. Pretty impressive, isn't it?
Sortable Lists
There's a type of list we probably use daily, namely, a to-do list. We usually use yellow Post-its
and some of us even use specialized software.
But with so many new web applications available out there, surely there must be a dozen to-do list
applications! I'll just mention Ta-da Lists (http://www.tadalist.com), created by 37signals.
This company has actually reinvented the entire concept of web applications and has taken it to the
next level. Ta-da Lists, one of its first products, is a tool that allows you to create several to-do
lists, each with its own items (things to do, that is). It's a really helpful tool and a lot of people use
it, although most of them have upgraded to other 37signals products like Basecamp
(http://www.basecamphq.com) and Backpack (http://www.backpackit.com).
Despite its intuitive user interface and easy-to-use actions, Ta-da Lists lacks a very basic feature
that would greatly increase its usability: dragging and dropping list items, thus reordering the list.
To reorder a list in Ta-da Lists, you have to click on a link that will refresh the page and display
four arrow buttons (bring to front, move up, move down, and send to back).
Although this implementation works well, a drag-and-drop system would make it faster and easier
to use. 37signals have improved this functionality in Basecamp, though, and the to-do lists in there
have draggable items—an upgrade that proves the usability of the drag-and-drop concept.
Building the AJAX Drag-and-Drop Sortable List
Application
One thing that sets this application apart from other applications we've built in this book is that in
this case, we are going to use two external JavaScript frameworks: Prototype and script.aculo.us.
"Prototype is a JavaScript framework that aims to ease development of dynamic web
applications." It was created by Sam Stephenson and is quickly becoming the JavaScript
framework, because of its great functionality.
Prototype is distributed under an MIT-style license and it can be downloaded from
http://prototype.conio.net.
If you want to learn more about Prototype, check out the tutorial on
http://www.particletree.com/features/quick-guide-to-prototype.
238
www.it-ebooks.info