I’ve been using JQuery for a while now and really agree with its tag line that it’s the “The Write Less, Do More, JavaScript Library”. We’ve also got this code for dragging and dropping table rows that has proved very popular, so it seemed natural to combine the two and wrap up the table drag and drop as a JQuery plugin.

Why have another plugin?

Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.

What does it do?

This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

How do I use it?

  1. Download Download jQuery (version 1.2 or above), then the TableDnD plugin (current version 0.7).
  2. Reference both scripts in your HTML page in the normal way.
  3. In true jQuery style, the typical way to initialise the tabes is in the $(document).ready function. Use a selector to select your table and then call tableDnD(). You can optionally specify a set of properties (described below).
1 One some text
2 Two some text
3 Three some text
4 Four some text
5 Five some text
6 Six some text

The HTML for the table is very straight forward (no Javascript, pure HTML):

<table id="table-1" cellspacing="0" cellpadding="2">
    <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
    <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
    <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
    <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
    <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
    <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</table>

To add in the “draggability” all we need to do is add a line to the $(document).ready(...) function
as follows:

<script type="text/javascript">
$(document).ready(function() {
    // Initialise the table
    $("#table-1").tableDnD();
});
</script>

In the example above we’re not setting any parameters at all so we get the default settings. There are a number of parameters you can set in order to control the look and feel of the table and also to add custom behaviour on drag or on drop. The parameters are specified as a map in the usual way and are described below:

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)

This second table has has an onDrop function applied as well as an onDragClass. The javascript to set this up is as follows:

$(document).ready(function() {

	// Initialise the first table (as before)
	$("#table-1").tableDnD();

	// Make a nice striped effect on the table
	$("#table-2 tr:even').addClass('alt')");

	// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
	$("#table-2").tableDnD({
	    onDragClass: "myDragClass",
	    onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was "+row.id+". New order: ";
            for (var i=0; i<rows.length; i++) {
                debugStr += rows[i].id+" ";
            }
	        $(#debugArea).html(debugStr);
	    },
		onDragStart: function(table, row) {
			$(#debugArea).html("Started dragging row "+row.id);
		}
	});
});
1 One
2 Two
3 Three
4 Four
5 Five
6 Six
7 Seven
8 Eight
9 Nine
10 Ten
11 Eleven
12 Twelve
13 Thirteen
14 Fourteen

What to do afterwards?

Generally once the user has dropped a row, you need to inform the server of the new order. To do this, we’ve added a method called serialise(). It takes no parameters but knows the current table from the context. The method returns a string of the form tableId[]=rowId1&tableId[]=rowId2&tableId[]=rowId3...
You can then use this as part of an Ajax load.

This third table demonstrates calling the serialise function inside onDrop (as shown below). It also demonstrates the “nodrop” class on row 3 and “nodrag” class on row 5, so you can’t pick up row 5 and
you can’t drop any row on row 3 (but you can drag it).

    $('#table-3').tableDnD({
        onDrop: function(table, row) {
            alert($.tableDnD.serialize());
        }
    });

Ajax result

Drag and drop in this table to test out serialise and using JQuery.load()

1 One
2 Two
3 Three (Can’t drop on this row)
4 Four
5 Five (Can’t drag this row)
6 Six

This table has multiple TBODYs. The functionality isn’t quite working properly. You can only drag the rows inside their own TBODY, you can’t drag them outside it. Now this might or might not be what you want, but unfortunately if you then drop a row outside its TBODY you get a Javascript error because inserting after a sibling doesn’t work. This will be fixed in the next version. The header rows all have the classes “nodrop” and “nodrag” so that they can’t be dragged or dropped on.

H1 H2 H3
4.1 One
4.2 Two
4.3 Three
4.4 Four
4.5 Five
4.6 Six
H1 H2 H3
5.1 One
5.2 Two
5.3 Three
5.4 Four
5.5 Five
5.6 Six
H1 H2 H3
6.1 One
6.2 Two
6.3 Three
6.4 Four
6.5 Five
6.6 Six

The following table demonstrates the use of the default regular expression. The rows have IDs of the form table5-row-1, table5-row-2, etc., but the regular expression is /[^-]*$/ (this is the same as used in the NestedSortable plugin for consistency). This removes everything before and including the last hyphen, so the serialised string just has 1, 2, 3 etc. You can replace the regular expression by setting the serializeRegexp option, you can also just set it to null to stop this behaviour.

    $('#table-5').tableDnD({
        onDrop: function(table, row) {
            alert($('#table-5').tableDnDSerialize());
        },
        dragHandle: ".dragHandle"
    });
1 One some text
2 Two some text
3 Three some text
4 Four some text
5 Five some text
6 Six some text

In fact you will notice that I have also set the dragHandle on this table. This has two effects: firstly only the cell with the drag handle class is draggable and secondly it doesn’t automatically add the cursor: move style to the row (or the drag handle cell), so you are responsible for setting up the style as you see fit.

Here I’ve actually added an extra effect which adds a background image to the first cell in the row whenever you enter it using the jQuery hover function as follows:

    $("#table-5 tr").hover(function() {
          $(this.cells[0]).addClass('showDragHandle');
    }, function() {
          $(this.cells[0]).removeClass('showDragHandle');
    });

This provides a better visualisation of what you can do to the row and where you need to go to drag it (I hope).

Tagged with:
 

911 Responses to Table Drag and Drop JQuery plugin

  1. GertV says:

    Is anny1 able to solve this problem ?
    It’s about loading this plug in with ajax. I realy need this to work because I have a deadline :/. Thanks in advance.
    http://stackoverflow.com/questions/16761175/cant-find-element-in-dom-after-loading-it-with-ajax

  2. Can we add new column using drag and drop.. means drag one name from list and add it as column in table..

  3. RoyHB says:

    On my site I have a handler that is bound to the tableDnD onDrop event. I need for this event to fire only if there has actually been a drag rather than just a click on the element.

    Or else I need a way to make the event handler determine if an actual drag has occurred or just a click. If just a click nothing should happen, if an actual drag has occurred then the handler should do it’s work.

  4. Samuil says:

    Cool plugin man. Thanks!

  5. Josh says:

    This morning I tried to use the native HTML5 drag and drop APIs to do this (Chrome 27 Mac), and found it to be buggy and not well implemented (especially in regard to the “shadow” element you get with native drag and drop). Searched around on Stack Overflow and found this plugin, which provides the *exact* functionality I need, and it still works great (jquery 1.8.3). Good stuff and thanks very much!

  6. Steven Pineda says:

    Thank You!! This is a very useful plugin

    I needed a list that could be reordered and dnd is the ideal way to do it, as I need to save the order I just implemented my onDrop function so that it stored the new order in a hidden input that’s being send to the server and voilà! :D

  7. peter says:

    Using the TableDnD plugin, textarea fields are not writable. How can I solf that.

  8. Jamal says:

    Hi
    Great plugin. Is there a way that a visual feedback can be given to the users during the drag?

  9. Tan says:

    Hi
    May i know what is the function is that when u click or move yr cursor to a content than will pop or show up a box which content other info ?

    Thanks in advance

    Regard
    Tan

  10. gahz says:

    Super útil este plugin, ya que el que existe solo es para listas, aparte de que al hacer el drop, no se sale de la tabla, saludos y gracias

  11. josh says:

    Can we do the drag and drop in table???

  12. billbrach says:

    Would it be possible to modify table-dnd.js, to allow content to be edited by using the HTML5 ‘contenteditable’ property ??

    Normally, you would click a cell to edit it, but of course, table-dnd.js takes control on Click. Maybe a double click for moving a row instead of a single click ?? Great piece of code, BTW.

  13. Doug says:

    Hi, plugin not working with latest jQuery (1.10). You need to update your “bind” events to “on” and then it works…

    jQuery(document)
    .bind(‘mousemove’, jQuery.tableDnD.mousemove)
    .bind(‘mouseup’, jQuery.tableDnD.mouseup);

    … to …

    jQuery(document)
    .on(‘mousemove’, jQuery.tableDnD.mousemove)
    .on(‘mouseup’, jQuery.tableDnD.mouseup);

    Thanks for a great plug-in.

  14. Roy says:

    First of all just want to say that this is a great plugin!! I wanted to know if there was a way to add a delay before the drag happens. I’m planning to use it in a mobile app but don’t want the sort to work when the user swipes across the screen to scroll a long table. They will need to hold on the row for a bit before the drag happens. Thanks in advnce

  15. Amit says:

    How could i update my Records according to the new positioning of Date in the table??????

  16. Marian says:

    How can I incorporate it to change the order in the database that it’s getting its data from via AJAX? The db has a field called sequence and it orders the rows by the sequence. I need to figure out how to communicate the new order via AJAX to accomplish this.

    • Dmitry says:

      Use onDrop function and $row.index() to get new item position. Positions of other items could be recalculated on back-end and front-end separately

  17. manoj says:

    Hi, this works only when td has plain text, if we add div inside the td then drag wont work. anyone can solve this problem?
    Regards,
    Manoj.

  18. bb says:

    The operating system does not support android.

  19. Jordan Baucke says:

    In reguards to Doug’s comment – I’m having trouble getting onDrop() to fire with jQuery 1.10 – I copied the source of the plugin from this page, and changed:


    jQuery(document)
    .bind(moveEvent, jQuery.tableDnD.mousemove)
    .bind(endEvent, jQuery.tableDnD.mouseup);

    to:


    jQuery(document)
    .on(moveEvent, jQuery.tableDnD.mousemove)
    .on(endEvent, jQuery.tableDnD.mouseup);

    But there was no effect?

    I realize the source isn’t the same as what he mentions (but I don’t know where he got it?)

    jQuery(document)
    .bind(‘mousemove’, jQuery.tableDnD.mousemove)
    .bind(‘mouseup’, jQuery.tableDnD.mouseup);

    … to …

    jQuery(document)
    .on(‘mousemove’, jQuery.tableDnD.mousemove)
    .on(‘mouseup’, jQuery.tableDnD.mouseup);

  20. Jordan Baucke says:

    Nevermind, the version of the code here works with the changes Doug suggested. Thanks.

  21. Uw Concept says:

    Please update your Github javascript file to include the dragHandle property (and maybe some other fixed issues). Thank you very much for this amazing script.

  22. Diego says:

    Nice plugin. Thanks.
    One question, how about if I have a title on the first row? How can I make it not dragable, since I set the plugin for the table, and not for the rows itself.

    I’m making some changes to the plugin, adding $(div.test:not(:first)), but it’s becoming buggy. Is there a setting for this? Couldn’t find it.

    Thanks.
    D

  23. Diego says:

    I guess I found. adding the class “nodrop nodrag”? Will it consider it when serializing? Will test it now.

  24. Shadab says:

    Facing issue in IE7 while moving a row within the table. Radio buttons are getting reset to their default values.

  25. KIRAN says:

    Hi,

    In case if I have a list of questions in which I have a group question how do I manage not to drag a question in between the group question?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>