Go Back John Clare's Personal Website Sunday, May 20, 2012
IE-only Drag-n-Drop Experiment
4077 M*A*S*H
1.Hotlips Houlihan
2.Frank Burns
3.Henry Blake
4.Father Francis Mulcahy
5.B.J. Hunnicut
6.Sherman T. Potter
7.Dr. Sidney Freedman
8.Hawkeye Pierce
9.Charles Emerson Winchester
10.Radar O'Reilly
11.Maxwell Q. Klinger
12.Spearchucker Jones
13.Trapper John McIntyre
Up
Down
Top 
Bottom
Scroll Up
Scroll Down
Save

At some time or another, every programmer will have to design an interface for re-sequencing. When coded for the Web, that usually means update access to some index number, or designing a submission method for each individual up/down request.

Or... you could do most of it entirely client-side, with some relatively simple javascript and the "InsertBefore()" method.

So here's my proof-of-concept experiment. This list of names is sourced from an Access Database file, and sorted by the sequence number you see here. Move the cursor over the rows, and click on one of them to select it. Once selected, you can move it up or down the list with the buttons below. Better yet, you can even drag-n-drop the row with the mouse.

Check out this experiment, view the page source, play and enjoy. (There's only one disclaimer - this is mostly functional only for Internet Explorer.)