Drag-and-drop table rows with jQuery

Notebook, JavaScript

There was a project I was working on where I needed to find a way to drag-and-drop rows of a table, basically resort the table rows. Now there were plenty of scripts for doing this within lists, but not so many for actual tables. The final solution I used was from an unexpected source, Isocra Consulting, who setup a jQuery plugin for this functionality. The library, TableDnD plugin, is fairly small, about 15K and was very easy to setup. The plugin included everything I needed without being too feature rich:

onDragStyle

This is the style that is assigned to the row during drag. There are limitations to the styles that can be
associated with a row (such as you can’t assign a border—well you can, but it won’t be
displayed). (So instead consider using onDragClass.) The CSS style to apply is specified as
a map (as used in the jQuery css(...) function).

onDropStyle

This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations
to what you can do. Also this replaces the original style, so again consider using onDragClass which
is simply added and then removed on drop.

onDragClass

This class is added for the duration of the drag and then removed when the row is dropped. It is more
flexible than using onDragStyle since it can be inherited by the row cells and other content. The default
is class is tDnD_whileDrag. So to use the default, simply customise this CSS class in your
stylesheet.

onDrop

Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table
and the row that was dropped. You can work out the new order of the rows by using
table.tBodies[0].rows.

onDragStart

Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the
table and the row which the user has started to drag.

scrollAmount

This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the
window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2,
FF3 beta)

Below are screenshots of the drag-and-drop before and after. As you can see I applied a yellow style to the row I am actively dragging and when dropped, the row flashes green for a second and the zebra-stripping auto-corrects itself.

Comments

jQuery Camp 2008

Events

*Update* - 8/28/2008 : The registration is now closed, but fortunately I made it into the pool of 150 people already attending the event! jQuery Camp 2008 here I come…

Learning jQuery
Author: Karl Swedberg

The jQuery Team is pleased to announce the second annual jQuery Camp! jQuery Camp 2008 will be held on Sunday, Sept. 28, the day before The Ajax Experience, in Boston, MA (location TBA).

Last year, over 100 jQuery developers gathered for a full day of jQuery sessions, which included talks from such big names as jQuery creator John Resig and other core team members, as well as talks from expert users exploring new and exciting jQuery projects. It brought together the largest group of jQuery Core Team members ever assembled, and gave users the opportunity to pick their brains and pitch new ideas.

The event was a *clear* success, and this year’s camp promises to be even better.

jQuery Camp 2008 will offer two tracks, providing both introductory and advanced sessions, covering a variety of topics. Ajax development, mashups, security and the recently released jQuery UI component and effects library are just some of the topics already lined up.

Original Announcement

Comments

Create style switcher with jQuery and PHP

Notebook, JavaScript

This tutorial shows you how to create a style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

http://nettuts.com/javascript-ajax/jquery-style-switcher/
by James Padolsey

If the user has Javascript enabled, a very slick fade-in and fade-out affect is shown with a loading icon. If Javascript is disabled, the style-sheet switches and the same end result is seen.

Comments off