Datasheet

Here’s another drag-and-drop example: the mosaic at thebroth.com. The idea here is that you and
others can drag tiles to create a shared artwork, using Ajax. When you drag a tile, its new location is
sent to the server using Ajax, and the tile’s position is updated everywhere, in everyone’s browser. You
can find the mosaic at
www.thebroth.com/mosaic, and it is shown in Figure 1.21.
FIGURE 1.21
Creating a shared mosaic
Drag and drop doesn’t always have to do with individual items. For example, take a look at
Ideo Technologies’ datagrid in Figure 1.22, which is located at
http://sweetdev-ria
.ideotechnologies.com/sweetdev-ria-demo-1.1-RC3/welcome.do
. The
datagrid control lets you rearrange columns by dragging them, as shown in the figure.
When you drag a column, the new column arrangement is sent to the server and stored, which
means that when you navigate to other pages for the same datagrid (using the number links under
the datagrid), that arrangement is preserved.
One of the biggest uses of dragging and dropping with Ajax is to implement shopping carts.
Normally, when you want to add an item to a shopping cart online, you have to go through several
pages: when you click the Add to Cart button, you then see a new page corresponding to the shop-
ping cart, and then you must navigate backward to continue shopping.
Wouldn’t that be much easier if you never had to leave the page you were shopping on? What if
you could simply drag an item to the shopping cart, and the server was notified behind the scenes
of your purchase? No fuss, no muss.
19
Essential Ajax
1
06_102633 ch01.qxp 2/23/07 9:44 PM Page 19