Table Drag and Drop JQuery plugin

<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>

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

$(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);
		}
	});
});

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

    $('#table-5').tableDnD({
        onDrop: function(table, row) {
            alert($('#table-5').tableDnDSerialize());
        },
        dragHandle: "dragHandle"
    });

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

716 Responses to “Table Drag and Drop JQuery plugin”

1. Rafaela Ramos says:

   October 28, 2011 at 12:26 pm

   Good day ..

   I wonder if you can apply to move
   the columns of the table and not the lines, eg I have a table that serves as
   a schedule where each column has a different time, I would like
   was possible to change the time just click and drag.

   Reply
2. Chuck says:

   October 28, 2011 at 12:36 pm

   I am using this in an application which enables users to change the order of routing for an agreement and if the route has already started, for example, and the first two “stops” on the route have been completed, I have added the noDrag and noDrop class to that route (table row) so that the user cannot change that part of the route. However, the user is still able to make changes to the incomplete part of the route. The problem is that the noDrop does not prevent the user from dragging a route and inserting it (dropping it) anywhere they want. BTW, I have to show all of the steps to the route, I can’t just not display them. I thought the whole purpose of the noDrop was to prevent this. Let me know if there is a fix to this available or if you have any suggestions. Also, I can’t use any classes, other than the ones for controlling the drag and drop, within the table. How come? Thanks

   Reply
3. tom says:

   November 1, 2011 at 5:23 am

   For me to use this plugin I needed a few things fixed, and I’ve seen in the comments here some things that other people wanted fixed, so I’ve done an update. I’d be pleased if the plugin maintainer would take this and run with it. Available from http://riouxsvn.com/svn/jquery-tablednd/trunk/. Tested on recent IE, FF, Chromium, Opera, but probably works properly on older browsers too. Documentation in the .js file, as before.
   Changes:
   Added _real_ support for multiple elements in a table
   Added support for multi-selection (only for jQuery >= 1.4 and browsers that provide dblclick events)
   Reduced no. of events processed
   Added support for specific buttons and modifier-states
   Tolerate pointer ‘jiggle’ e.g. from in-cell click, without triggering a drag
   Un-dragged rows classed “nodrop” treated as “fixed position”, regardless of where drop occurs
   During drags, apply onDragStyle (if it exists) before, not instead of, onDragClass if that exists
   Added support for onRowsChanged callback
   Improved browser compatibility
   Added missing default onAllowDrop
   Removed unused default serializeParamName
   Removed redundant scrollAmount parameter
   Removed redundant updateTables()

   Reply
   • Jeremy says:

     November 22, 2011 at 10:26 pm

     Would love your changes (esp multiple tbody support), but that link to the source doesn’t work. Could you provide a new link please. Thanks.

     Reply
4. tom says:

   November 1, 2011 at 5:26 am

   Edit previous comment:
   Added _real_ support for multiple <tbody> elements in a table

   Reply
5. Larry says:

   November 2, 2011 at 11:55 pm

   Wondering if this is still in development. I needed functionality for clicking on a row as well as dragging a row so I added an onClick handler to the code. It requires multiple changes so it’s difficult to post what the changes to the code are, but it would be nice to add this to the official version.

   Reply
   • DenisH says:

     November 3, 2011 at 9:37 am

     Hi Larry, I don’t have any time at the moment to do development, but I’ve made a TableDnD repository at GitHub so that people can add their enhancements. Please feel free to add your updates there. If I get time I’ll try and incorporate all the other improvements that people have come up with. You can also join the Cloud9 TableDnD project.

     Reply
6. Alex says:

   November 3, 2011 at 12:59 pm

   I was having problems using this on a heavily customised page and found a check for nullity on e.firstChild fixed a number of issues

           /** Safari fix -- thanks to Luis Chato for this! */
           if (e.offsetHeight == 0) {
               /** Safari 2 doesn't correctly grab the offsetTop of a table row
               this is detailed here:
               http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/
               the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.
               note that firefox will return a text node as a first child, so designing a more thorough
               solution may need to take that into account, for now this seems to work in firefox, safari, ie */
               if (e.firstChild) {
                   e = e.firstChild; // a table cell
               }
           }
   

   Reply
7. Pankaj says:

   November 28, 2011 at 5:26 am

   Hi,
   Thanks for this great plug-in. This has all the necessary features but sadly it does not work in Chrome.

   If “jQuery” in plugin is changed to “$”( just like all other jquery plugins), it works in Chrome as well.

   Hope you would integrate this change.

   Reply
8. Bill says:

   November 29, 2011 at 5:50 pm

   How do I make the database save changes after my rows have been re-ordered? I found plenty of info for saving re-ordered lists but haven’t been able to find anything for tables. I’m using ColdFusion and so far everything works except for any changes I make by moving rows. Thanks.

   Reply
   • DenisH says:

     November 30, 2011 at 10:02 am

     Bill,

     If you look at the section above called “What to do afterwards?” it explains how you can use serialise() to notify the server using Ajax. The code I use is as follows:

     	$('#table-3').tableDnD({
     	    onDrop: function(table, row) {
     	        alert("Result of $.tableDnD.serialise() is "+$.tableDnD.serialize());
     		$('#AjaxResult').load("/articles/ajaxTest.php?"+$.tableDnD.serialize());
             }
     	});
     

     As you can see, it’ very easy, All I do is call $('#AjaxResult').load("..") and this replaces the contents of that div with the results returned by the server. The URL that I generate has the serialised IDs in a form that works well for PHP. The PHP source for my test page is:

     The server says: your row order was<br/>
     <?php
     $result = $_REQUEST["table-3"];
     foreach($result as $value) {
     	echo "$value<br/>";
     }
     ?>
     

     Reply
9. Bill says:

   November 30, 2011 at 4:24 pm

   Thanks Denis but it’s not working for me. I only have one table row Id as the code is looping through the database for other records.

   Untitled Document

   <!– Add in the jQuery draggability –>

   $(document).ready(function() {
   // Initialise the table
   $(“#table-1″).tableDnD();
   });

   $(document).ready(function() {
   // Initialise the table
   $(‘#table-1′).tableDnD({
   onDrop: function(table, row) {
   alert(“Result of $.tableDnD.serialise() is “+$.tableDnD.serialize());
   $(‘#AjaxResult’).load(“test.php?”+$.tableDnD.serialize());
   }
   });

   The server says: your row order was
   <?php
   $result = $_REQUEST["table-1"];
   foreach($result as $value) {
   echo "$value”;
   }
   ?>

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

   ID
   Rank
   Text
   Listing ID

   Reply
10. Romedix says:

    December 1, 2011 at 4:58 pm

    HI, Thanks a lot, I was looking this time ago.

    I would like to know how I make it work on an IPAD or IPhone.

    I’ll be expecting for your answer.

    Bye

    Reply
    • DenisH says:

      December 2, 2011 at 8:42 am

      Hi Romedix, I only got hold of an iPad this week so hadn’t been able to test it until now. The problem is that the events you need to trap are different for iPad/iPhone/iPod (possibly Android too?). Dan Wellman shows how to fix jQuery code to work with an iPad and you could use those ideas to modify the TableDnD code. If you do, then please use our GitHub repository to add your changes.

      Good luck!

      Reply
      • DenisH says:

        December 2, 2011 at 8:24 pm

        Hi again Romedix, in fact now that I’ve got this iPad I decided to have a go at enhancing the plug-in. Here’s the latest version github.com/isocra/TableDnD/blob/master/js/jquery.tablednd.js.

        I haven’t had time to integrate it with this blog posting, so the examples above won’t work with touch devices, but if you download everything from GitHub it should work fine.

        Reply
        • z says:

          December 26, 2011 at 5:40 pm

          No work on iPad =/

          Reply
          • z says:

            December 26, 2011 at 6:16 pm

            i try u script on a simple appl, and no work. i can´t change order.
            Can u help me?

            i download the all source, but no work yet
11. ganesh says:

    December 2, 2011 at 6:32 am

    Hi i got very very useful trick from this..
    thank so much providing this…
    my photo ordering was done very easily..
    thank u so much..

    Reply
12. Andrew says:

    December 11, 2011 at 11:45 pm

    Hello,
    From my brief testing it doesn’t appear to support tables with a rowspan column attribute. For example:

    HeaderDetails1Details2
    Details3Details4

    In this example I expected that dragging the first column would drag two rows of the table together. Although I imagine this is not a trivial feature to implement, do you think it’s a valid case?

    Reply
13. Florian says:

    December 19, 2011 at 10:21 am

    Hy i found a bug->

    
            var rows = table.rows; //getElementsByTagName("tr")
    

    -> only tbody tr –>

            var rows = table.tBodies[0].rows; //getElementsByTagName("tr")
    

    Reply
14. LA says:

    December 28, 2011 at 7:57 pm

    Is there an easy way to “freeze” the last row in place so that nothing can take its place?

    Reply
15. Krishnamoorthy says:

    December 29, 2011 at 5:55 am

    Hi ,
    I want to Move the rows to Up and Down on click the button in the JQGrid (MVC3 razor).
    Can any one help on this.

    Reply
16. Mr. Tantrum says:

    January 2, 2012 at 10:12 pm

    I’m having a heck of a time getting this to work with .NET & C#. I had it working perfectly with ColdFusion, but my host no longer supports it. I’ve tried with Gridview and ListView but my challenge is that I can only get the script to post a list of row ID’s as forced by .NET (e.g. 0,1,2,3,4). In CF I looped through a query and assigned row IDs according to the record ID. This way, I could easily CFLOOP through the result string (e.g. recID1, recID2, redID3, etc.) and assign the new order ID to the db based upon the list position of the record ID. What I can’t figure out how to do in .NET is either assign the table rows the record ID like I did in CF or use the new row ID ordered list to somehow update the record IDs with their new order ID. Any advise/help would be greatly appreciated!

    Reply
    • Mr. Tantrum says:

      January 5, 2012 at 3:47 pm

      Okay, this may not be very elegant, but at least I figured out a way to accomplish what I want even thought .NET does not allow you to assign table row ID’s using Gridview or Listview controls. Hopefully, this will help others or spark someone to let everyone know how to do it better with C# in .NET using MS SQL Server. To begin with, I used a javascript to assign row ID’s. Also, as a FYI, I modified the .js file to return a simple comma delimted string of values instead of what it was returning with table identities and additional text (e.g. 1,2,3,etc. instad of TableName[]=1, TableName[]=2, etc.)

      What I did is create a second column in the db to give me an “Order” and “NewOrder” columns. Upon the user reordering rows per this plugin, they then click an “update row order” button that posts to the following actions:
      1) Split the string and convert to integers
      2) used a foreach loop incrementing a value x++ for each time through
      3) performed an update query setting NewOrder to “x” where Order = newly converted integer
      4) after loop performed update query to set Order values = NewOrder values
      5) Redirect back to original page

      While this is an overview, if anyone is interested in the detailed code examples then please post a message and let me know.

      Reply
17. DanielB says:

    January 5, 2012 at 11:18 pm

    I’ve been able to implement this on both GridView and DataGrids.

    $(document).ready(function() {
      // Initialise the table
      $("[id$=grd]").tableDnD({
        onDragClass: "ListRow3",
        onDrop: function(table, row) {
          var keys = GetSortOrder();
          var rows = table.tBodies[0].rows;
          var sequence = "";
          var sep = "";
    
          // save the keys sequence to a comma seperated string
          for (var i = 0; i < keys.length; i++) {
            sequence += sep + keys[i];
            sep = ","
          }
    
          // pass the new display sequence to the server
          SaveSequence(sequence);
    
          // reapply the default grid style
          GridStyle("grd");
        },
        dragHandle: "dragHandle"
      });
    });
    

    I get the keys I need for my string by storing them in a hidden field and using JQuery to retrieve them like this.

    // gets the key from each row in the grid in the order presented on the page
    function GetSortOrder() {
        var keys = new Array();
        $('input:hidden[id$=MenuId]', $("[id$=grd]")).each(function(item, index) {
            keys.push($(this).val());
         });
         return keys;
    }
    

    Then I can save the data to the server with an AJAX call

    // make an ajax call to the server to save the new display sequence
    function SaveSequence(order) {
        $.ajax({
            type: "POST",
            url: "[page name]/[page method]",
            data: '{"sequence": ' + "\"" + order + "\"" + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: AjaxFailed
        });
    }
    

    Reply
18. christopher says:

    January 9, 2012 at 6:07 am

    I am trying to implement this code without AJAX… How can I send the data through the form via POST?
    I tried:

    $("#submit").click(function(table, row) {
                document.forms['checkboxes'].elements["serialize"].value = $.tableDnD.serialize();
                document.forms['checkboxes'].submit();
            });

    But it appears that that function can only be called in the Tablednd

    Reply
19. Babak Fakhamzadeh says:

    January 11, 2012 at 4:21 pm

    Schweed.

    Reply
20. Jitendra says:

    January 16, 2012 at 12:24 pm

    onAllowDrop: function(draggedRow, row) {

    var str = draggedRow.attr(‘id’);

    }
    i need in this function Item dropped target Row

    I have tried this function findDropTargetRow() but can not got the result.
    Please help!
    Thanks

    Reply
21. Cadi says:

    January 21, 2012 at 10:34 am

    Bonjour,
    Juste un petit manque pour améliorer le graphisme sans recharger la page.
    Contrairement à l’exemple donné, cette fonction marche.

    Hi,
    juste to have more pleasant design without reloading page.
    This is a better way than the example given.

    $(‘table#table-1 tr:nth-child(even)’).addClass(‘yourclass-1′).removeClass(‘yourclass-2′);
    $(‘table#table-1 tr:nth-child(odd)’).addClass(‘yourclass-2′).removeClass(‘yourclass-1′);

    Reply
22. russell07 says:

    January 25, 2012 at 2:52 pm

    Hi DenisH – I love your plugin, and I’m trying to implement the function to allow drag and drop on iPhone. I know I need to change the code on the html side around my jQuery draggable call, but not 100% sure on the syntax construction.

    Could you show me your example of how you managed to perform the drag and drop on your ipad from the HTML page side?

    Many thanks

    Reply
23. Szymon Błakała says:

    January 25, 2012 at 10:29 pm

    I did modify your script to use in my CMS.

    There was a big issue with images in list and i had to rewrite mouseCoord methods.

    Now it shoud look like:

    In mousemove method:

    var y = mousePos.y; // – jQuery.tableDnD.mouseOffset.y;

    In findDropTargetRow:

    var rowY = this.getPosition(row).y;
    var rowHeight = parseInt(row.offsetHeight);

    if (row.offsetHeight == 0) {
    rowY = this.getPosition(row.firstChild).y;
    rowHeight = parseInt(row.firstChild.offsetHeight);
    }

    var rowYTo = rowY+rowHeight;

    // Because we always have to insert before, we need to offset the height a bit
    if ((y rowY)) {

    Reply