Drag and drop - Arrange table rows

Overview

This script applies drag and drop features to HTML tables. It is a nice script to use if you want to enable your users to rearrange rows in a table, example: Articles in a Content Management System(CMS)

Licensing

This script is licensed under LGPL. Commercial licenses are also available

Download

arrange-table-rows.zip

Demo

Rearrange the table below by dragging the rows( drag handle is in the first column)

Id	Title	Publish date	Withdraw date
1	Coldest winter since 1973	November 15th	November 16th
2	Christmas shopping starting early this year	November 15th	November 16th
3	Ten year old boy rescued a cat	November 15th	November 16th
4	Top goal scorer injured in yesterdays match	November 15th	November 16th
5	Local hero returns home	November 15th	November 16th
6	15 year old boy caught big shark	November 15th	November 16th
7	Big Test of compact cameras	November 15th	November 16th
8	New football stadium in 2012	November 15th	November 16th
9	What's the deal with politics?	November 15th	November 16th
10	What's the deal with airplane peanuts?	November 15th	November 16th

Configuration

Step 1 - Create your HTML table

Create a standard HTML table and give it an id, example:

<table id="myTable">
<thead>
    <tr>
      <td>Id</td>
      <td>Title</td>
      <td>Publish date</td>
      <td>Withdraw date</td>
</tr>
</thead>
<tbody>
    <tr id="row1">
      <td>1</td>
      <td>Coldest winter since 1973</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row2">
      <td>2</td>
      <td>Christmas shopping starting early this year</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row3">
      <td>3</td>
      <td>Ten year old boy rescued a cat</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row4">
      <td>4</td>
      <td>Top goal scorer injured in yesterdays match</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row5">
      <td>5</td>
      <td>Local hero returns home</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row6">
      <td>6</td>
      <td>15 year old boy caught big shark</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
    <tr id="row7">
      <td>7</td>
      <td>Big Test of compact cameras</td>
      <td>November 15th</td>
      <td>November 16th</td>
</tr>
</tbody>
</table>

Please notice that the table has both a <thead> and a <tbody> tag. thead is used for the header which isn't dragable, and tbody for the dragable rows.

Each row has also been assigned to unique ids. These can be important when you want to save the changes made to the table

Step 2 - Create your Javascript object

Code example:

var arrangeObj = new DG.ArrangeTableRows({
   el: 'myTable',
   onDrag : {
     showCell : 1
   },
   listeners : {
     drop : moveArticle
   }
});

You create a new ArrangeTableRows object by calling "new DG.ArrangeTableRows". The constructor of the DG.ArrangeTableRows class accepts a config with these properties:

el: Reference to the table you want to apply drag and drop feature to, in this example: "myTable" since that's the id of the table in the code above
onDrag: (Optional argument). Used in case you don't want the entire row to be displayed while dragging. To show only content of a single cell, set onDrag.showCell to the index of the cell you want to display, example: 1 for the second cell(0 = first cell).
onDrag: {
showCell : 1
}
If you want to display contentof more than one cell, send in an array, example:
onDrag: {
showCell : [1,2}
}
In the demo above, onDrag.showCell is set to 1, i.e. only the cell with the title is displayed while dragging.
listeners: Functions to call when events are triggered. Currently, only an event named "drop" is implemented. In the example code above, when a row has been moved, the function named "moveArticle" will be called. It will receive a config object as only argument. This object looks like this:
{
  source : '<id of source>',,
  destination : '<id of destination>',,
  where : 'before|after',
  position : <position of dragged row(1=first row, 2 = second row ..)>,
}
source contains the id of the moved row, destination the id of the row where the node has been inserted next to. where indicates if it's been inserted before or after the destination node. position indicates it's new position in the table.
clsFilter: (Optional) - If defined, only rows assigned to this css class will be dragable, example:
clsFilter : 'dragableRow'

Save changes

You will usually want to save changes instantly in the moveArticle function(from the drop event), or manually from a button or link.

The DG.ArrangeTableRows class contains one public method which can be very useful when you want to save changes. It's called "getRows", and it returns an array of the id's of all rows in the table, example:

["row1", "row2", "row3", "row4", "row10", "row5", "row6", "row7", "row8", "row9"]

One way to save changes is to send this array to the server and update each row in your database by looping through this array. The demo file(se link at top) gives you some examples of Ajax requests(See source)

Public methods:

getRows: - Returns array of current row order
reset: - Resets table back to initial state
saveState: - Sets new initial state

Comments

Thank you

Kawin at 12:54AM, 2012/02/13.

This sample code in demo.html for saving changes to the server does not work for me. It also has at least one syntax error in that there is no single quote at the end of the url. It also uses a function from some other js file (_getNextPuzzle) that did not come with the package.

function logRows() {
/*
getRows() returns an array with the id of the rows, example:
["row1", "row2", "row3", "row4", "row5", "row6", "row7", "row8", "row9", "row10"]

Here, you may also save changes to the server. Here's an example of a mootools Ajax request:
*/
var req = new Request({
url: 'saveOrder.php',
method : 'post',
data : {
saveOrder : '1',
rows : arrangeObj.getRows().join(',')
},
onSuccess: function(content){
this._getNextPuzzle();
}.bind(this)
});
req.send();
/*
which sends the rows as a commaseparated list of id's to saveOrder.php

*/
var rows = arrangeObj.getRows();
try{
console.log(rows);
}catch(e) {
alert(rows.join(','));
}

}

Carter at 12:51AM, 2012/07/31.

I found the answer here:
http://www.dhtmlgoodies.com/forum/viewtopic.php?t=2260

I made a hidden form and submit it via Javascript.

Carter at 09:21PM, 2012/08/10.

If you re-size your browser window after the page has loaded and try move rows, the arrow does not adjusted to the new table horizontal location.

cheesypoof at 05:23PM, 2012/09/25.

Great code !But, the mootools used (1.2.4) isn't compatible with my web site, and the last (1.4.5) version doesn't work with your JS code (mootools-core-1.4.5.js).May you help me ?Thanx

Xavier at 04:09PM, 2013/06/04.

As i use also prototype.js, and your excellent script use mootools (which are totally incompatible), i can't use it. :/Bad news !

Xavier at 06:41AM, 2013/06/05.

Great script!Took a while to implement, it certainly has helped . Thanks.Now for the but.... :-)I don't seem to get IE's export to excel working on right click.We get a script error atLine 0Char 0Error Script ErrorCode 0URL: file//,,,/,,,/,,,/javascript/exernal/mootools-1.2.4-core-yc.jsCan you help?Thanks

Tony Cooper at 12:55PM, 2014/04/14.

I get the error:Uncaught ReferenceError: Class is not defineddg-arrange-table-rows.js: 32(I'm using Drupal, so that's how we add JS to the page)drupal_add_js("misc/arrange-table-rows/js/dg-arrange-table-rows.js");drupal_add_js("var arrangeObj = new DG.ArrangeTableRows({ el: 'employees', listeners : { drop : moveArticle }});");

Allison C at 04:19PM, 2015/02/23.

not working with jquery.min.jsgive error while drag the rowdg-arrange-table-rows.js:262 Uncaught TypeError: $(...).getParent is not a functionDG.ArrangeTableRows.Class._overTableRow @ dg-arrange-table-rows.js:262extend._owner @ mootools-1.2.4-core-yc.js:97d @ mootools-1.2.4-core-yc.js:180

ravi at 07:34AM, 2016/04/12.