patched tableDND library

13 Feb

jQuer UI sortable lets you drag things to rearrange lists and apparently doesn't work on tables.

So I found this:

http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

which does let you drag table rows up and down. Works pretty nicely, though it could do with some animation or shadow effects or something as it's *too* slick, the change is instantaneous. Anyway, it's a great library and works fine. I'm using it in Scrumptious to let users rearrange bookmarks in a trail.

The issue though, buried in all those comments somewhere, is that you can't drag things inside table cells. In this case, I have some button-like titles which are the obvious drag handles. In a comment, the author says this is to prevent problems with clicking on links and such-like, but I think it's too big a trade-off.

I modified "makeDraggable" to do this as follows, and it works fine.

?????? // mahemoff – patched this so dragHandle is *child* of a TD, not a TD itself
?????? // also, dragHandle is now a jQuery selector, not a class name
?????? if (table.tableDnDConfig.dragHandle) {
?????????? // We only need to add the event to the specified cells
?????????? jQuery(table.tableDnDConfig.dragHandle, table).each(function() {
?????????????? // The cell is bound to "this"
?????????????????????????????? var cell = this.parentNode;
?????????????????????????????? console.log("cell", cell);
?????????????????????????????? jQuery(cell).mousedown(function(ev) {
?????????????????????????????????????? jQuery.tableDnD.dragObject = this.parentNode;
?????????????????????????????????????? jQuery.tableDnD.currentTable = table;?????????????????????????????????????? jQuery.tableDnD.mouseOffset = jQuery.tableDnD.getMouseOffset(this, ev);
?????????????????????????????????????? if (config.onDragStart) {???????????????????????????????????????????????? // Call the onDrop method if there is one???????????????????????????????????????????????? config.onDragStart(table, this);?????????????????????????????????????? }
?????????????????????????????????????? return false;
?????????????????????????????? });
?????????? })

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: