How should I design my page to allow for dynamic movement of elements on the page?

Question

I'm working on an ASP.NET page where I've got 10 entities. I'll call them Items. An Item can be displayed in one of two modes: Featured or Thumbnail. At any given time there is one Featured Item at the top of the page, and the rest are Thumbnails arranged in a 3x3 grid underneath the featured Item Each item is an ASP usercontrol that contains two divs: one div for Featured and one for Thumbnail -- when the item is Featured, the Thumbnail div is set as invisible and vice versa.

My current goal is to be able to click on any of the Thumbnails and have it physically swap places with the currently featured item to make the clicked Thumbnail become the new current Featured item at the top of the page. The eventual goal is to use jQuery to animate the movement but this is only a side consideration at this point. Also please note that I am trying to do all this without the use of page refreshes (i.e. I wish to use AJAX or javascript)

Here are some of the possibilities that I have been thinking about:

1. Put the entire page inside an UpdatePanel and rearrange which Item usercontrol goes to which placeholder (i'm using placeholders)

   • Pros: easy
   • Cons: VERY INEFFICIENT. Each Item already has a couple UpdatePanels in them despite my trying to minimize my use of them

2. Use jQuery/javascript to swap the order of the items' occurrences within the page

   • Pros: simply swapping the order would work because I have the items arranged by floating
   • Cons: my javascript/jquery is weak, and if a user ever navigates away and comes back the change will not persist.

Dear web dev wizards out there, what would you do if you were in my shoes?

Answer 1

This feels a bit like a slide show. As such, I'd go strictly client side javascript. I wouldn't worry too much about state persistence though you could do that if you want by setting a cookie or appending the url with anchor hashes.

Also, at that point, you wouldn't really need multiple DIVs for each item. You could, via the jQuery move the div itself and then change the SRC attribute (and CSS) of the image to go fetch the larger one.